小程序用户管理静态页完成

src/router/index.js

@@ -61,6 +61,8 @@ export const moduleRoutes = {
     { path: '/agentQuestionnairePublish', component: () => import('@/views/modules/agent/questionnaire/publish'), name: 'agentQuestionnairePublish', meta: { title: '发布问卷', isTab: false } },
     { path: '/agentUserInfo', component: () => import('@/views/modules/agent/userInfo'), name: 'agentUserInfo', meta: { title: '个人信息', isTab: false } },
     { path: '/agentTeamUser', component: () => import('@/views/modules/agent/company/teamUser'), name: 'agentTeamUser', meta: { title: '成员管理', isTab: false } },
+
+    { path: '/wechatUserDetail', component: () => import('@/views/modules/wechatUserDetail'), name: 'wechatUserDetail', meta: { title: '小程序用户详情', isTab: false } },
   ]
 }
 

src/views/modules/wechatUser.vue

@@ -1,17 +1,133 @@
 <template>
-    <div class="agent_page">
-        <h3>小程序用户管理</h3>
+    <div class="agent_page adffc">
+        <div class="ap_title">{{ title }}</div>
+        
+        <el-form :model="queryParams" ref="queryRef" label-width="118px" style="margin-top: 20px;">
+          <el-row>
+            <el-col :span="6" style="padding-right: 20px;">
+                <el-form-item label="注册渠道">
+                    <el-select v-model="queryParams.xxx" placeholder="请选择注册渠道"></el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="6" style="padding-right: 20px;">
+                <el-form-item label="用户昵称/手机号">
+                    <el-input v-model="queryParams.yyy" placeholder="请输入用户昵称/手机号" style="width: 100%;"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="8" style="padding-right: 20px;">
+                <el-form-item label="时间周期">
+                    <el-date-picker
+                        v-model="queryParams.zzz"
+                        type="datetimerange"
+                        range-separator="至"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间">
+                    </el-date-picker>
+                </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item style="display: flex;align-items: center;">
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                <el-button type="primary" @click="getList">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无小程序用户" max-height="578px" style="margin-top: 5px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="用户昵称" prop="xx"></el-table-column>
+            <el-table-column label="手机号码" prop="xx"></el-table-column>
+            <el-table-column label="注册编号" prop="xx"></el-table-column>
+            <el-table-column label="用户类型" prop="xx">
+                <template #default="{ row }"></template>
+            </el-table-column>
+            <el-table-column label="注册渠道" prop="xx">
+                <template #default="{ row }"></template>
+            </el-table-column>
+            <el-table-column label="注册时间" prop="xx"></el-table-column>
+            <el-table-column label="最近登录时间" prop="xx"></el-table-column>
+            <el-table-column label="操作" width="150">
+                <template #default="scope">
+                    <el-button link type="text" size="mini" @click="handleReview(scope.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
     </div>
 </template>
 
 <script setup name="">
     import { ref, getCurrentInstance } from 'vue'
     const { proxy } = getCurrentInstance();
+    const title = proxy.$route.meta.title;
+    const queryParams = ref({
+        page:1,
+        limit:10,
+        xxx:'',
+        yyy:'',
+        zzz:''
+    })
+    const dataList = ref([1])
+    const total = ref(0)
+    const loading = ref(false)
     
+    const resetQuery = () => {
+        proxy.$refs.queryRef.resetFields();
+        queryParams.value = {
+            page:1,
+            limit:10,
+            xxx:'',
+            yyy:'',
+            zzz:''
+        }
+        getList();
+    }
+
+    const getList = async () => {
+        let query = {...queryParams.value};
+        loading.value = true;
+        // const res = await getCoachList(query);
+        // dataList.value = res.data.list;
+        // total.value = res.data.total;
+        loading.value = false;
+    }
+    const handleSizeChange = (e)=>{
+        queryParams.value.limit = e;
+        getList();
+    }
+    const handleCurrentChange = (e)=>{
+        queryParams.value.page = e;
+        getList();
+    }
+
+    const handleReview = (row) => {
+        proxy.$router.push({
+            path:'/wechatUserDetail',
+            query:{
+                id:row.id,
+                name:row.name
+            }
+        })
+    }
 </script>
 
 <style scoped lang="scss">
-    .page{
-        padding: 16px;
+    .agent_page{
+        padding: 24px 16px;
     }
 </style>

src/views/modules/wechatUser/inviteRecord.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="page">
+        <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无邀请记录" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="用户昵称" prop="xx"></el-table-column>
+            <el-table-column label="手机号码" prop="xx"></el-table-column>
+            <el-table-column label="注册编号" prop="xx"></el-table-column>
+            <el-table-column label="邀请渠道" prop="xx"></el-table-column>
+            <el-table-column label="渠道类型" prop="xx"></el-table-column>
+            <el-table-column label="注册时间" prop="xx"></el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<script setup name="">
+    const props = defineProps({
+        list:{
+            typeof:Array,
+            default:()=>[]
+        }
+    });
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const queryParams = ref({
+        page: 1,
+        pageSize: 10
+    })
+    const total = ref(0)
+    const loading = ref(false)
+
+    const handleSizeChange = (val) => {
+        queryParams.value.pageSize = val;
+        proxy.$emit('handleSizeChange', queryParams);
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        proxy.$emit('handleCurrentChange', queryParams);
+    }
+</script>
+
+<style scoped lang="scss">
+    
+</style>

src/views/modules/wechatUser/payRecord.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="page">
+        <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无交易记录" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="订单编号" prop="xx"></el-table-column>
+            <el-table-column label="交易时间" prop="xx"></el-table-column>
+            <el-table-column label="商品类型" prop="xx">
+                <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column label="购买次数" prop="xx"></el-table-column>
+            <el-table-column label="交易金额(元)" prop="xx"></el-table-column>
+            <el-table-column label="有效期至" prop="xx"></el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<script setup name="">
+    const props = defineProps({
+        list:{
+            typeof:Array,
+            default:()=>[]
+        }
+    });
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const queryParams = ref({
+        page: 1,
+        pageSize: 10
+    })
+    const total = ref(0)
+    const loading = ref(false)
+
+    const handleSizeChange = (val) => {
+        queryParams.value.pageSize = val;
+        proxy.$emit('handleSizeChange', queryParams);
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        proxy.$emit('handleCurrentChange', queryParams);
+    }
+</script>
+
+<style scoped lang="scss">
+    
+</style>

src/views/modules/wechatUser/questionnaireManager.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="page">
+        <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无问卷管理" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="问卷名称" prop="xx"></el-table-column>
+            <el-table-column label="问卷类型" prop="xx"></el-table-column>
+            <el-table-column label="团队名称" prop="xx"></el-table-column>
+            <el-table-column label="问卷状态" prop="xx">
+                <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column label="创建时间" prop="xx"></el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<script setup name="">
+    const props = defineProps({
+        list:{
+            typeof:Array,
+            default:()=>[]
+        }
+    });
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const queryParams = ref({
+        page: 1,
+        pageSize: 10
+    })
+    const total = ref(0)
+    const loading = ref(false)
+
+    const handleSizeChange = (val) => {
+        queryParams.value.pageSize = val;
+        proxy.$emit('handleSizeChange', queryParams);
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        proxy.$emit('handleCurrentChange', queryParams);
+    }
+</script>
+
+<style scoped lang="scss">
+    
+</style>

src/views/modules/wechatUser/reportRecord.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="page">
+        <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无报告记录" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="报告名称" prop="xx"></el-table-column>
+            <el-table-column label="报告类型" prop="xx">
+                <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column label="报告状态" prop="xx">
+                <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column label="发送人" prop="xx"></el-table-column>
+            <el-table-column label="团队名称" prop="xx"></el-table-column>
+            <el-table-column label="创建时间" prop="xx"></el-table-column>
+            <el-table-column label="操作" width="150">
+                <template #default="scope">
+                    <el-button link type="text" size="mini" @click="handleReview(scope.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<script setup name="">
+    const props = defineProps({
+        list:{
+            typeof:Array,
+            default:()=>[]
+        }
+    });
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const queryParams = ref({
+        page: 1,
+        pageSize: 10
+    })
+    const total = ref(0)
+    const loading = ref(false)
+
+    const handleSizeChange = (val) => {
+        queryParams.value.pageSize = val;
+        proxy.$emit('handleSizeChange', queryParams);
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        proxy.$emit('handleCurrentChange', queryParams);
+    }
+
+    const handleReview = (row) => {
+        proxy.$emit('handleReview', row);
+    }
+</script>
+
+<style scoped lang="scss">
+    
+</style>

src/views/modules/wechatUser/teamManager.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="page">
+        <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无团队" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="团队名称" prop="xx"></el-table-column>
+            <el-table-column label="所在公司" prop="xx"></el-table-column>
+            <el-table-column label="所属地区" prop="xx"></el-table-column>
+            <el-table-column label="所属行业" prop="xx"></el-table-column>
+            <el-table-column label="团队职能类型" prop="xx"></el-table-column>
+            <el-table-column label="团队架构类型" prop="xx"></el-table-column>
+            <el-table-column label="团队规模" prop="xx"></el-table-column>
+            <el-table-column label="团队层级" prop="xx"></el-table-column>
+            <el-table-column label="团队简介" prop="xx" show-overflow-tooltip></el-table-column>
+            <el-table-column label="创建时间" prop="xx"></el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<script setup name="">
+    const props = defineProps({
+        list:{
+            typeof:Array,
+            default:()=>[]
+        }
+    });
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const queryParams = ref({
+        page: 1,
+        pageSize: 10
+    })
+    const total = ref(0)
+    const loading = ref(false)
+
+    const handleSizeChange = (val) => {
+        queryParams.value.pageSize = val;
+        proxy.$emit('handleSizeChange', queryParams);
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        proxy.$emit('handleCurrentChange', queryParams);
+    }
+</script>
+
+<style scoped lang="scss">
+    
+</style>

src/views/modules/wechatUser/teamUser.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="page">
+        <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无团队成员" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="成员昵称" prop="xx"></el-table-column>
+            <el-table-column label="手机号码" prop="xx"></el-table-column>
+            <el-table-column label="邮箱" prop="xx"></el-table-column>
+            <el-table-column label="人员身份类型" prop="xx"></el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+    </div>
+</template>
+
+<script setup name="">
+    const props = defineProps({
+        list:{
+            typeof:Array,
+            default:()=>[]
+        }
+    });
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const queryParams = ref({
+        page: 1,
+        pageSize: 10
+    })
+    const total = ref(0)
+    const loading = ref(false)
+
+    const handleSizeChange = (val) => {
+        queryParams.value.pageSize = val;
+        proxy.$emit('handleSizeChange', queryParams);
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        proxy.$emit('handleCurrentChange', queryParams);
+    }
+</script>
+
+<style scoped lang="scss">
+    
+</style>

src/views/modules/wechatUserDetail.vue

@@ -0,0 +1,266 @@
+<template>
+    <div class="agent_page">
+        <div class="top adfac">
+            <div class="top-left adfac" @click="handleBack">
+                <img src="@/assets/images/agent/arrow_left.png">
+                <span>返回</span>
+            </div>
+            <div class="top-title">用户详情</div>
+        </div>
+        <div class="basic">
+            <div class="dtitle">基础资料</div>
+            <div class="info adf">
+                <div class="info-left adffcac">
+                    <img src="@/assets/images/agent/dialog_avatar.png">
+                    <div class="type">{{ "基础版用户" }}</div>
+                </div>
+                <div class="info-right adf">
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">用户昵称：</div>
+                        <div class="info-right-pre-content">{{ '刘宇然' }}</div>
+                    </div>
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">手机号码：</div>
+                        <div class="info-right-pre-content">{{ '187 **** 9876' }}</div>
+                    </div>
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">注册编号：</div>
+                        <div class="info-right-pre-content">{{ '18798760987' }}</div>
+                    </div>
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">注册时间：</div>
+                        <div class="info-right-pre-content">{{ '2025-06-30 13:00:08' }}</div>
+                    </div>
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">注册渠道：</div>
+                        <div class="info-right-pre-content">{{ '创衡运营邀请渠道' }}</div>
+                    </div>
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">渠道类型：</div>
+                        <div class="info-right-pre-content">{{ 'A类型' }}</div>
+                    </div>
+                    <div class="info-right-pre adfac">
+                        <div class="info-right-pre-title">最近登录时间：</div>
+                        <div class="info-right-pre-content">{{ '2025-10-30 13:00:08' }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ap_line" style="margin-top: 15px;"></div>
+        <div class="data">
+            <div class="dtitle">使用数据</div>
+            <div class="data-num adfac">
+                <div class="data-num-pre adffcac">
+                    <p>创建团队</p>
+                    <span>{{ 8 }}</span>
+                </div>
+                <div class="data-num-pre adffcac">
+                    <p>创建问卷</p>
+                    <span>{{ 8 }}</span>
+                </div>
+                <div class="data-num-pre adffcac">
+                    <p>可以次数基础版</p>
+                    <span>{{ 3 }}</span>
+                </div>
+                <div class="data-num-pre adffcac">
+                    <p>可用次数专业版</p>
+                    <span>{{ 10 }}</span>
+                </div>
+                <div class="data-num-pre adffcac">
+                    <p>累计购买金额</p>
+                    <span>￥{{ 888 }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="ap_line" style="margin-top: 24px;"></div>
+        <div class="list">
+            <div class="tab adfac">
+                <div class="tab-pre" :class="{'active':tidx===index}" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{ item }}</div>
+            </div>
+            <div class="table">
+                <TeamManager v-if="tidx===0" :list="[]"></TeamManager>
+                <InviteRecord v-if="tidx===1" :list="[]"></InviteRecord>
+                <QuestionnaireManager v-if="tidx===2" :list="[]"></QuestionnaireManager>
+                <TeamUser v-if="tidx===3" :list="[]"></TeamUser>
+                <PayRecord v-if="tidx===4" :list="[]"></PayRecord>
+                <ReportRecord v-if="tidx===5" :list="[]"></ReportRecord>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup name="">
+    import TeamManager from './wechatUser/teamManager.vue'
+    import InviteRecord from './wechatUser/inviteRecord.vue'
+    import QuestionnaireManager from './wechatUser/questionnaireManager.vue'
+    import TeamUser from './wechatUser/teamUser.vue'
+    import PayRecord from './wechatUser/payRecord.vue'
+    import ReportRecord from './wechatUser/reportRecord.vue'
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const tidx = ref(0)
+    const tabList = ref(['团队管理','邀请记录','问卷管理','团队成员','交易记录','报告记录'])
+
+    const handleBack = () => {
+        proxy.$router.go(-1)
+    }
+
+    const changeTab = (index) => {
+        tidx.value = index
+    }
+</script>
+
+<style scoped lang="scss">
+    .agent_page{
+        .dtitle{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #002846;
+            line-height: 22px;
+        }
+        .top{
+            padding: 13px 20px;
+            border-bottom: 1px solid #F3F4F6;
+            &-left{
+                cursor: pointer;
+                img{
+                    width: 22px;
+                    height: 22px;
+                }
+                span{
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 14px;
+                    color: #33A7A7;
+                    line-height: 20px;
+                    margin-left: 6px;
+                }
+            }
+            &-title{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 14px;
+                color: #33536B;
+                line-height: 20px;
+                margin-left: 25px;
+            }
+        }
+        .basic{
+            padding: 20px 21px 0;
+            .info{
+                margin-top: 18px;
+                &-left{
+                    width: 190px;
+                    img{
+                        width: 64px;
+                        height: 64px;
+                    }
+                    .type{
+                        padding: 4px 6px;
+                        background: #FFE796;
+                        border-radius: 4px;
+                        margin-top: 10px;
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #667E90;
+                        line-height: 16px;
+                    }
+                }
+                &-right{
+                    width: calc(100% - 190px);
+                    margin-top: -20px;
+                    flex-wrap: wrap;
+                    &-pre{
+                        width: calc(100% / 3);
+                        margin-top: 20px;
+                        &-title{
+                            width: 100px;
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #667E90;
+                            line-height: 16px;
+                            text-align: right;
+                        }
+                        &-content{
+                            width: calc(100% - 100px);
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #002846;
+                            line-height: 16px;
+                            padding-left: 12px;
+                            box-sizing: border-box;
+                        }
+                    }
+                }
+            }
+        }
+        .ap_line{
+            height: 16px;
+        }
+        .data{
+            padding: 20px 21px 0;
+            &-num{
+                margin-top: 16px;
+                &-pre{
+                    width: calc(100% / 5);
+                    p{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #667E90;
+                        line-height: 16px;
+                        text-align: center;
+                    }
+                    span{
+                        font-family: D-DINExp, D-DINExp;
+                        font-weight: bold;
+                        font-size: 24px;
+                        color: #002846;
+                        line-height: 24px;
+                        text-align: center;
+                        margin-top: 12px;
+                    }
+                }
+            }
+        }
+        .list{
+            .tab{
+                padding-top: 21px;
+                border-bottom: 1px solid #ECEEF5;
+                &-pre{
+                    padding: 0 24px 17px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #33536B;
+                    line-height: 16px;
+                    cursor: pointer;
+                    position: relative;
+                    &.active{
+                        font-weight: bold;
+                        color: #002846;
+                        &::after{
+                            content: '';
+                            width: 48px;
+                            height: 3px;
+                            background: #33A7A7;
+                            border-radius: 2px;
+                            position: absolute;
+                            left: 50%;
+                            margin-left: -24px;
+                            bottom: 0;
+                        }
+                    }
+                }
+            }
+            .table{
+                padding: 0 20px 24px;
+            }
+        }
+    }
+</style>