feat 搭建架构骨架
This commit is contained in:
63
src/views/profile/cpns/HotlinePanel.vue
Normal file
63
src/views/profile/cpns/HotlinePanel.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
// 热线展示(静态 mock,接入站点配置后由 store 提供)
|
||||
const HOTLINE = '000-000-0000'
|
||||
const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hotline-panel">
|
||||
<div class="hotline-panel__card">
|
||||
<span class="hotline-panel__icon" aria-hidden="true">📞</span>
|
||||
<h3 class="hotline-panel__title">
|
||||
专属客服热线
|
||||
</h3>
|
||||
<p class="hotline-panel__number">
|
||||
{{ HOTLINE }}
|
||||
</p>
|
||||
<p class="hotline-panel__time text-secondary">
|
||||
{{ WORK_TIME }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hotline-panel {
|
||||
.flex(row, center);
|
||||
padding: @spacing-xxl 0;
|
||||
|
||||
&__card {
|
||||
.flex(column, center);
|
||||
gap: @spacing-base;
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
padding: @spacing-xxl @spacing-xl;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: @font-size-xxl * 2;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__number {
|
||||
font-size: @font-size-xxl + @spacing-sm;
|
||||
font-weight: 700;
|
||||
color: @primary-color;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user