lbw_9527443
14ee188856
- 移除硬编码的团队成员数据，改为从API获取 - 添加可选链操作符处理可能为空的成员数据 - 重构异常预警处理逻辑，动态生成预警消息 - 调整UI组件间距和样式 - 清理无用注释和代码
1818 lines
40 KiB
Vue
1818 lines
40 KiB
Vue
<template>
|
||
<div
|
||
class="manager-dashboard"
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
overflow-y: auto;
|
||
"
|
||
>
|
||
<!-- 动态显示：根据是否有路由参数显示不同内容 -->
|
||
<!-- 自己访问时显示经理个人看板 -->
|
||
<template v-if="!isRouteNavigation">
|
||
<sale style="width: 100%;">
|
||
</sale>
|
||
</template>
|
||
|
||
<!-- 路由跳转时显示面包屑导航 -->
|
||
<div v-if="isRouteNavigation" class="route-header-section">
|
||
<div class="breadcrumb-container">
|
||
<div class="breadcrumb">
|
||
<span class="breadcrumb-item" @click="goBack">高级经理看板</span>
|
||
<span class="breadcrumb-separator">></span>
|
||
<span class="breadcrumb-item current">团队管理</span>
|
||
</div>
|
||
<div class="user-name">
|
||
{{ routeUserName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经理团队看板 -->
|
||
<h1>经理团队看板</h1>
|
||
<main class="dashboard-main">
|
||
<!-- Top Section - Team Alerts and Today's Report -->
|
||
<div class="top-section">
|
||
<!-- Team Alerts -->
|
||
<TeamAlerts :abnormalData="groupAbnormalResponse" />
|
||
<!-- Today's Team Report -->
|
||
<TeamReport :weekTotalData="weekTotalData" />
|
||
|
||
</div>
|
||
<!-- Sales Funnel Section -->
|
||
<SalesFunnel :funnelData="weekTotalData.group_funnel" />
|
||
|
||
<!-- Bottom Section -->
|
||
<div class="bottom-section">
|
||
<!-- Left Section -->
|
||
<div class="left-section">
|
||
<PerformanceRanking
|
||
:team-members="teamMembers"
|
||
:selected-member="selectedMember"
|
||
:group-ranking="groupRanking"
|
||
@select-member="selectMember"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Right Section -->
|
||
<div class="right-section">
|
||
<!-- Member Details -->
|
||
<MemberDetails :selected-member="selectedMember" />
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed } from "vue";
|
||
import TeamAlerts from "./components/TeamAlerts.vue";
|
||
import TeamReport from "./components/TeamReport.vue";
|
||
import SalesFunnel from "./components/SalesFunnel.vue";
|
||
import PerformanceRanking from "./components/PerformanceRanking.vue";
|
||
import MemberDetails from "./components/MemberDetails.vue";
|
||
import Sale from "../person/Sale.vue";
|
||
import SalesTimelineWithTaskList from "../person/components/SalesTimelineWithTaskList.vue";
|
||
import RawDataCards from "../person/components/RawDataCards.vue";
|
||
import CustomerDetail from "../person/components/CustomerDetail.vue";
|
||
import { useUserStore } from "@/stores/user";
|
||
import { useRouter } from "vue-router";
|
||
import {getGroupAbnormalResponse, getWeekTotalCall, getWeekAddCustomerTotal, getWeekAddDealTotal, getWeekAddFeeTotal, getGroupFunnel,getPayDepositToMoneyRate,getGroupRanking } from "@/api/manager.js";
|
||
|
||
// 团队成员数据
|
||
const teamMembers = [
|
||
{
|
||
id: 1,
|
||
name: "李娜",
|
||
rank: 1,
|
||
performance: 120000,
|
||
conversion: 8.0,
|
||
calls: 156,
|
||
callTime: 8.5,
|
||
newClients: 12,
|
||
deals: 5,
|
||
avgDealValue: 24000,
|
||
}
|
||
];
|
||
|
||
// 路由实例
|
||
const router = useRouter();
|
||
|
||
// 用户store实例
|
||
const userStore = useUserStore();
|
||
|
||
// 获取通用请求参数的函数
|
||
const getRequestParams = () => {
|
||
const params = {}
|
||
// 只从路由参数获取
|
||
const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
|
||
const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
|
||
// 如果路由有参数，使用路由参数
|
||
if (routeUserLevel) {
|
||
params.user_level = routeUserLevel.toString()
|
||
}
|
||
if (routeUserName) {
|
||
params.user_name = routeUserName
|
||
}
|
||
|
||
return params
|
||
}
|
||
|
||
// 判断是否为路由导航（有路由参数）
|
||
const isRouteNavigation = computed(() => {
|
||
const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
|
||
return !!routeUserName
|
||
})
|
||
|
||
// 获取路由传递的用户名
|
||
const routeUserName = computed(() => {
|
||
return router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name || ''
|
||
})
|
||
|
||
// 返回上一页
|
||
const goBack = () => {
|
||
router.go(-1)
|
||
}
|
||
// 团队战报总览
|
||
const weekTotalData = ref({
|
||
week_total_call: {},
|
||
week_add_customer_total: {},
|
||
week_add_deal_total: {},
|
||
week_add_fee_total: {},
|
||
pay_deposit_to_money_rate: {},
|
||
group_funnel: {},
|
||
week_add_fee_total: {},
|
||
});
|
||
// 团队异常预警
|
||
const groupAbnormalResponse = ref({})
|
||
async function TeamGetGroupAbnormalResponse() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
try {
|
||
const response = await getGroupAbnormalResponse(hasParams ? params : undefined)
|
||
const rawData = response.data
|
||
|
||
// 转换数据格式，生成预警消息
|
||
const processedAlerts = []
|
||
let alertId = 1
|
||
|
||
// 处理严重超时异常人员
|
||
const timeoutPersons = rawData.erious_timeout_rate_abnorma || []
|
||
// 处理表格填写异常人员
|
||
const fillingPersons = rawData.table_filling_abnormal || []
|
||
|
||
// 为每个异常人员生成独立的预警消息
|
||
|
||
// 处理严重超时率异常人员
|
||
timeoutPersons.forEach(person => {
|
||
processedAlerts.push({
|
||
id: `timeout-${alertId++}`,
|
||
type: 'warning',
|
||
icon: '⚠',
|
||
message: `${person}严重超时率过高`
|
||
})
|
||
})
|
||
|
||
// 处理表格填写率异常人员
|
||
fillingPersons.forEach(person => {
|
||
processedAlerts.push({
|
||
id: `filling-${alertId++}`,
|
||
type: 'warning',
|
||
icon: '⚠',
|
||
message: `${person}表格填写率过低`
|
||
})
|
||
})
|
||
|
||
// 设置处理后的数据
|
||
groupAbnormalResponse.value = { processedAlerts }
|
||
|
||
} catch (error) {
|
||
console.error('获取团队异常预警失败:', error)
|
||
}
|
||
}
|
||
// 团队总通话
|
||
async function TeamGetWeekTotalCall() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
const res = await getWeekTotalCall(hasParams ? params : undefined)
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
weekTotalData.value.week_total_call = res.data
|
||
}
|
||
}
|
||
// 新增客户
|
||
async function TeamGetWeekAddCustomerTotal() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
const res = await getWeekAddCustomerTotal(hasParams ? params : undefined)
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
weekTotalData.value.week_add_customer_total = res.data
|
||
}
|
||
}
|
||
// 新增成交
|
||
async function TeamGetWeekAddDealTotal() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
const res = await getWeekAddDealTotal(hasParams ? params : undefined)
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
weekTotalData.value.week_add_deal_total = res.data
|
||
}
|
||
}
|
||
// 月度总业绩
|
||
|
||
|
||
// 定金转化
|
||
async function TeamGetWeekAddFeeTotal() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
const res = await getPayDepositToMoneyRate(hasParams ? params : undefined)
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
weekTotalData.value.pay_deposit_to_money_rate = res.data
|
||
}
|
||
}
|
||
// 销售漏斗
|
||
async function TeamGetGroupFunnel() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
const res = await getGroupFunnel(hasParams ? params : undefined)
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
weekTotalData.value.group_funnel = res.data
|
||
/**
|
||
* "data": {
|
||
"user_name": "马然",
|
||
"user_level": 2,
|
||
"customers_count": {
|
||
"线索总数": 132,
|
||
"有效沟通": 33,
|
||
"到课数据": 59,
|
||
"预付定金": 7,
|
||
"成功签单": 2
|
||
}
|
||
}
|
||
*/
|
||
}
|
||
}
|
||
// 团队业绩排名
|
||
const groupRanking = ref({})
|
||
|
||
async function TeamGetGroupRanking() {
|
||
const params = getRequestParams()
|
||
const hasParams = params.user_name
|
||
const res = await getGroupRanking(hasParams ? params : undefined)
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
groupRanking.value = res.data
|
||
}
|
||
}
|
||
// 成员详细数据
|
||
const memberDetails = ref({})
|
||
|
||
|
||
// 当前选中的成员，默认为空
|
||
const selectedMember = ref(null);
|
||
|
||
// 选择成员函数
|
||
const selectMember = (member) => {
|
||
selectedMember.value = member;
|
||
};
|
||
|
||
// 团队异常预警
|
||
|
||
onMounted(async () => {
|
||
await TeamGetGroupAbnormalResponse()
|
||
await TeamGetWeekTotalCall()
|
||
await TeamGetWeekAddCustomerTotal()
|
||
await TeamGetWeekAddDealTotal()
|
||
await TeamGetWeekAddFeeTotal()
|
||
await TeamGetGroupFunnel()
|
||
await TeamGetGroupRanking()
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/styles/main.scss";
|
||
|
||
.manager-dashboard {
|
||
background-color: #f8fafc;
|
||
min-height: 100vh;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
background: #f8fafc;
|
||
padding: 0;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
background: #f8fafc;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
// 路由导航顶栏样式
|
||
.route-header-section {
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 1rem;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
margin-bottom: 1.5rem;
|
||
|
||
.breadcrumb-container {
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(102, 126, 234, 0.05),
|
||
rgba(118, 75, 162, 0.05)
|
||
);
|
||
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
|
||
.breadcrumb-item {
|
||
color: #64748b;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
|
||
&:not(.current) {
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
color: #3b82f6;
|
||
}
|
||
}
|
||
|
||
&.current {
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
color: #94a3b8;
|
||
font-size: 0.875rem;
|
||
}
|
||
}
|
||
|
||
.user-name {
|
||
color: #1e293b;
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
padding: 0.5rem 1rem;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border-radius: 0.5rem;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.dashboard-header {
|
||
background: white;
|
||
padding: 1.5rem 2rem;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
width: 100%;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
padding: 1.75rem 2rem;
|
||
width: 100%;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
padding: 1.5rem 1.5rem;
|
||
width: 100%;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
padding: 1.25rem 1rem;
|
||
width: 100%;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
padding: 1rem 0.75rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.header-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
max-width: 1400px;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
max-width: 100%;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
max-width: 100%;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
.logo-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
gap: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.logo-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: #3b82f6;
|
||
color: white;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
width: 52px;
|
||
height: 52px;
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
width: 48px;
|
||
height: 48px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
width: 36px;
|
||
height: 36px;
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
.header-text {
|
||
h1 {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: #1e293b;
|
||
margin: 0 0 0.25rem 0;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 1.125rem;
|
||
}
|
||
}
|
||
|
||
p {
|
||
color: #64748b;
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dashboard-main {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
max-width: 1400px;
|
||
padding: 1.5rem;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
max-width: 100%;
|
||
padding: 1rem;
|
||
gap: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
max-width: 100%;
|
||
padding: 0.75rem;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
max-width: 100%;
|
||
padding: 0.5rem;
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.top-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 3fr;
|
||
gap: 1rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: 1fr 3fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: 1fr 2fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.analytics-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.bottom-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.customer-detail-section {
|
||
width: 100%;
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
|
||
.left-section,
|
||
.right-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
align-items: stretch;
|
||
min-height: 600px;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
gap: 2rem;
|
||
min-height: 650px;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
gap: 1.5rem;
|
||
min-height: 600px;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
gap: 1rem;
|
||
min-height: auto;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
gap: 0.75rem;
|
||
min-height: auto;
|
||
}
|
||
}
|
||
|
||
// 通用组件样式适配
|
||
:deep(.team-alerts),
|
||
:deep(.team-report),
|
||
:deep(.sales-funnel),
|
||
:deep(.performance-ranking),
|
||
:deep(.member-details) {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 1rem;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
overflow: hidden;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
border-radius: 1rem;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
padding: 1.75rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
border-radius: 0.875rem;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
border-radius: 0.75rem;
|
||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
||
padding: 1rem;
|
||
}
|
||
|
||
h2, h3 {
|
||
margin: 0 0 1rem 0;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.25rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1.125rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 1rem;
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.9375rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 团队预警组件适配
|
||
:deep(.team-alerts) {
|
||
.alert-item {
|
||
padding: 0.75rem;
|
||
margin-bottom: 0.5rem;
|
||
border-radius: 0.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
padding: 1rem;
|
||
gap: 1rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
padding: 0.75rem;
|
||
gap: 0.75rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
padding: 0.625rem;
|
||
gap: 0.5rem;
|
||
font-size: 0.8125rem;
|
||
flex-direction: row;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
padding: 0.5rem;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.alert-icon {
|
||
flex-shrink: 0;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 1.125rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 团队报告组件适配
|
||
:deep(.team-report) {
|
||
.report-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.report-card {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border-radius: 0.5rem;
|
||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
padding: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
padding: 0.875rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.5rem;
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.25rem;
|
||
}
|
||
}
|
||
|
||
.card-title {
|
||
color: #64748b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
.card-trend {
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.6rem;
|
||
}
|
||
}
|
||
|
||
.card-value {
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 1.125rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 销售漏斗组件适配
|
||
:deep(.sales-funnel) {
|
||
.funnel-description {
|
||
color: #64748b;
|
||
margin-bottom: 1.5rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
margin-bottom: 1.75rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.75rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.7rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
|
||
.funnel-chart {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
height: 120px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
height: 100px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
height: auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
gap: 0.375rem;
|
||
}
|
||
}
|
||
|
||
.funnel-stage {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
height: 120px;
|
||
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
height: 100px;
|
||
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
height: 60px;
|
||
clip-path: none;
|
||
border-radius: 8px;
|
||
|
||
&:nth-child(4) {
|
||
grid-column: 1;
|
||
grid-row: 2;
|
||
}
|
||
|
||
&:nth-child(5) {
|
||
grid-column: 2;
|
||
grid-row: 2;
|
||
}
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
height: 50px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.stage-label {
|
||
font-weight: 500;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.75rem;
|
||
margin-bottom: 0.125rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.7rem;
|
||
margin-bottom: 0.125rem;
|
||
}
|
||
}
|
||
|
||
.stage-value {
|
||
font-weight: 700;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 业绩排名组件适配
|
||
:deep(.performance-ranking) {
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
max-height: 650px;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
max-height: 600px;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
max-height: 450px;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
max-height: 400px;
|
||
}
|
||
|
||
.ranking-table {
|
||
.table-header {
|
||
display: grid;
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: 50px 1fr 80px 90px 90px;
|
||
gap: 1rem;
|
||
font-size: 0.875rem;
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: 45px 1fr 70px 90px 90px;
|
||
|
||
gap: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
padding: 0.875rem 0;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 40px 1fr 60px 90px 90px;
|
||
|
||
gap: 0.5rem;
|
||
font-size: 0.75rem;
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 30px 1fr 60px 90px 90px 90px;
|
||
|
||
gap: 0.375rem;
|
||
font-size: 0.7rem;
|
||
padding: 0.625rem 0;
|
||
|
||
.conversion {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-row {
|
||
display: grid;
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
|
||
&:hover {
|
||
background-color: rgba(102, 126, 234, 0.05);
|
||
}
|
||
|
||
&.selected {
|
||
background-color: rgba(102, 126, 234, 0.1);
|
||
}
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: 50px 1fr 80px 90px 90px;
|
||
|
||
gap: 1rem;
|
||
font-size: 0.875rem;
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: 45px 1fr 90px 70px 90px 90px;
|
||
|
||
gap: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
padding: 0.875rem 0;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 40px 1fr 80px 60px 90px 90px;
|
||
|
||
gap: 0.5rem;
|
||
font-size: 0.8rem;
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 30px 1fr 60px;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
padding: 0.625rem 0;
|
||
|
||
.conversion {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.rank {
|
||
font-weight: 700;
|
||
color: #667eea;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.8125rem;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-weight: 500;
|
||
color: #1e293b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
.performance {
|
||
font-weight: 600;
|
||
color: #059669;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
.conversion {
|
||
color: #64748b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 成员详情组件适配
|
||
:deep(.member-details) {
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
max-height: 650px;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
max-height: 600px;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
max-height: 500px;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
max-height: 450px;
|
||
}
|
||
|
||
.details-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.25rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0.75rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
|
||
.detail-card {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border-radius: 0.5rem;
|
||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
padding: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
padding: 0.875rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.detail-label {
|
||
color: #64748b;
|
||
margin-bottom: 0.5rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.875rem;
|
||
margin-bottom: 0.625rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.8125rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.75rem;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.7rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
}
|
||
|
||
.detail-value {
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.9375rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 指导建议适配
|
||
.guidance-section {
|
||
margin-top: 1.5rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.guidance-header {
|
||
margin-bottom: 1rem;
|
||
|
||
h3 {
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.guidance-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
gap: 1.25rem;
|
||
padding: 1.25rem 0;
|
||
flex-direction: row;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
gap: 1rem;
|
||
padding: 1rem 0;
|
||
flex-direction: row;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
gap: 0.75rem;
|
||
padding: 0.875rem 0;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
gap: 0.5rem;
|
||
padding: 0.75rem 0;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.guidance-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
width: 36px;
|
||
height: 36px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
width: 32px;
|
||
height: 32px;
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
width: 28px;
|
||
height: 28px;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
width: 24px;
|
||
height: 24px;
|
||
font-size: 0.8125rem;
|
||
}
|
||
}
|
||
|
||
.guidance-content {
|
||
flex: 1;
|
||
|
||
.guidance-title {
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin-bottom: 0.25rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
.guidance-description {
|
||
color: #64748b;
|
||
margin-bottom: 0.75rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.8125rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.75rem;
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.7rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.65rem;
|
||
margin-bottom: 0.625rem;
|
||
}
|
||
}
|
||
|
||
.guidance-action {
|
||
.action-label {
|
||
color: #64748b;
|
||
margin-bottom: 0.25rem;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
font-size: 0.6rem;
|
||
}
|
||
}
|
||
|
||
.action-text {
|
||
background: rgba(102, 126, 234, 0.1);
|
||
color: #667eea;
|
||
border-radius: 0.375rem;
|
||
font-weight: 500;
|
||
|
||
// PC端保持一致布局
|
||
@media (min-width: 1024px) {
|
||
padding: 0.5rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
// 平板端适配
|
||
@media (max-width: 1023px) and (min-width: 769px) {
|
||
padding: 0.4375rem;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
padding: 0.375rem;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
// 小屏移动端适配
|
||
@media (max-width: 480px) {
|
||
padding: 0.3125rem;
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|