wujingling0908
2 weeks ago
parent
16391a2eef
commit
86bd523a3d
@ -0,0 +1,250 @@ |
||||
<script setup> |
||||
import { ref, onMounted, computed, inject } from 'vue'; |
||||
import { Post } from '@/utils/https' |
||||
const store = inject('appStore', null) |
||||
const businessHandleInfo = ref({}) |
||||
const abstractList = computed(() => [ |
||||
{ |
||||
title: '保障状态', |
||||
num: 3, |
||||
text: '保单保障中', |
||||
unit: '张', |
||||
btnText: '查保单', |
||||
btnBg: 'linear-gradient(90deg, #025cea 0%, #0595f6 100%)', |
||||
}, |
||||
{ |
||||
title: '待办任务', |
||||
num: businessHandleInfo.value?.contents?.length || 0, |
||||
text: '待办需处理', |
||||
unit: '个', |
||||
btnText: '去处理', |
||||
btnBg: 'linear-gradient(111deg, #ff752a 44%, #feb52d 136%)', |
||||
}, |
||||
{ |
||||
title: '权益领取', |
||||
num: 0, |
||||
text: '生存金权益', |
||||
unit: '项', |
||||
btnText: '去领取', |
||||
btnBg: 'linear-gradient(261deg, #2ed0c6 3%, #08b7ac 65%)', |
||||
}, |
||||
].filter(item => item.num > 0)) |
||||
const businessHandle = () => { |
||||
if ( |
||||
store.source == "95270000" || |
||||
store.source == "95320000" || |
||||
store.source == "95350000" || |
||||
store.source == "95810000" |
||||
) { |
||||
Post("notify/info", { userInfoId: store.userId }) |
||||
.then((res) => { |
||||
if (res.data?.contents.length > 0) { |
||||
businessHandleInfo.value = res.data; |
||||
} |
||||
}) |
||||
.catch((error) => { |
||||
console.log(error); |
||||
}); |
||||
} |
||||
} |
||||
onMounted(async () => { |
||||
businessHandle() |
||||
}) |
||||
</script> |
||||
<template> |
||||
<div class="abstract-con" v-if="abstractList.length"> |
||||
<div class="title"> |
||||
<span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.svg" alt="" srcset="" /> |
||||
</div> |
||||
<div class="list"> |
||||
<div :class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`" |
||||
v-for="(item, index) in abstractList || []" :key="index"> |
||||
<div> |
||||
<div class="title">{{ item.title }}</div> |
||||
<div class="content" :style="{ display: (abstractList || []).length > 2 ? 'block' : 'flex' }"> |
||||
<div class="nums"> |
||||
<div class="num"> |
||||
{{ item.num }}<span>{{ item.unit }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="text" :style="{ marginTop: (abstractList || []).length > 2 ? '8rem' : '0' }"> |
||||
{{ item.text }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="btn" :style="{ background: item.btnBg }">{{ item.btnText }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<style lang="scss" scoped> |
||||
.abstract-con { |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
padding: 10rem 12rem; |
||||
gap: 12rem; |
||||
align-self: stretch; |
||||
|
||||
background: linear-gradient(77deg, #fcfdfd80 -1%, #f5f7fee6 99%); |
||||
|
||||
box-sizing: border-box; |
||||
border: 1rem solid rgba(255, 255, 255, 0.9); |
||||
|
||||
backdrop-filter: blur(10rem); |
||||
border-radius: 12rem; |
||||
|
||||
.title { |
||||
font-family: PingFang SC; |
||||
font-size: 16rem; |
||||
font-weight: 500; |
||||
line-height: normal; |
||||
letter-spacing: 0rem; |
||||
|
||||
/* 科个中性/正文-标题 17204D */ |
||||
/* 样式描述：用于正文标题 */ |
||||
color: #17204d; |
||||
|
||||
img { |
||||
width: 20rem; |
||||
margin-left: 4.6rem; |
||||
} |
||||
} |
||||
|
||||
.list { |
||||
margin-top: 13rem; |
||||
display: flex; |
||||
gap: 8rem; |
||||
|
||||
.item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 12rem; |
||||
flex: 1; |
||||
border-radius: 8rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 12rem; |
||||
gap: 12rem; |
||||
|
||||
background: #fcfdfd; |
||||
|
||||
box-shadow: 0rem 4rem 10rem 0rem #e7effd; |
||||
|
||||
.title { |
||||
margin-left: 18rem; |
||||
font-family: PingFang SC; |
||||
font-size: 12rem; |
||||
font-weight: normal; |
||||
line-height: 16rem; |
||||
letter-spacing: 0rem; |
||||
|
||||
/* 科个中性/正文-副标题 7E849F */ |
||||
color: #7e849f; |
||||
} |
||||
|
||||
.content { |
||||
.nums { |
||||
font-family: DIN-Medium; |
||||
font-size: 24rem; |
||||
font-weight: bold; |
||||
line-height: 24rem; |
||||
letter-spacing: 0rem; |
||||
|
||||
font-variation-settings: 'opsz' auto; |
||||
color: #17204d; |
||||
|
||||
.num { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
span { |
||||
font-family: PingFang SC; |
||||
font-size: 12rem; |
||||
font-weight: normal; |
||||
line-height: 16rem; |
||||
letter-spacing: 0rem; |
||||
margin: 0 3rem 0 3rem; |
||||
|
||||
/* 中性/重要文本色 */ |
||||
/* 样式描述：17204D */ |
||||
color: #17204d; |
||||
} |
||||
} |
||||
|
||||
.text { |
||||
font-family: PingFang SC; |
||||
font-size: 12rem; |
||||
font-weight: normal; |
||||
line-height: 16rem; |
||||
letter-spacing: 0rem; |
||||
|
||||
/* 中性/次要文本色 */ |
||||
/* 样式描述：7E849F */ |
||||
color: #7e849f; |
||||
align-self: flex-end; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
border-radius: 100rem; |
||||
font-family: PingFang SC; |
||||
font-size: 14rem; |
||||
font-weight: 500; |
||||
line-height: 19rem; |
||||
text-align: center; |
||||
letter-spacing: 0rem; |
||||
|
||||
color: #ffffff; |
||||
padding: 4rem 12rem; |
||||
height: 28rem; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.singleItem { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
>div { |
||||
margin-left: 36rem; |
||||
|
||||
.title { |
||||
font-family: PingFang SC; |
||||
font-size: 14rem; |
||||
font-weight: 500; |
||||
line-height: normal; |
||||
letter-spacing: 0rem; |
||||
margin-left: 0; |
||||
|
||||
/* 科个中性/正文-标题 17204D */ |
||||
/* 样式描述：用于正文标题 */ |
||||
color: #17204d; |
||||
margin-bottom: 4rem; |
||||
} |
||||
|
||||
.content { |
||||
.nums { |
||||
font-size: 12rem; |
||||
font-weight: normal; |
||||
line-height: 16rem; |
||||
letter-spacing: 0rem; |
||||
|
||||
z-index: 1; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #17204d; |
||||
|
||||
span { |
||||
color: #7e849f; |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,3 +1,47 @@ |
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
const welcomeWord = ref('下午好，张先生') |
||||
const welcomeSubWord = ref('我是您的服务管家皮卡丘') |
||||
</script> |
||||
<template> |
||||
<div></div> |
||||
<div class="welcome-con"> |
||||
<div class="welcome-title">{{ welcomeWord }}</div> |
||||
<div class="sub-title">{{ welcomeSubWord }}</div> |
||||
</div> |
||||
</template> |
||||
<style lang="scss" scoped> |
||||
.welcome-con { |
||||
padding: 23rem 8rem; |
||||
|
||||
.welcome-title { |
||||
font-family: PingFang SC; |
||||
font-size: 20rem; |
||||
font-weight: 600; |
||||
line-height: normal; |
||||
letter-spacing: 0em; |
||||
|
||||
font-variation-settings: 'opsz' auto; |
||||
background: linear-gradient(266deg, #001a9c -18%, #0f194c 82%); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
background-clip: text; |
||||
text-fill-color: transparent; |
||||
margin-bottom: 4rem; |
||||
} |
||||
|
||||
.sub-title { |
||||
font-family: PingFang SC; |
||||
font-size: 18rem; |
||||
font-weight: 600; |
||||
line-height: normal; |
||||
letter-spacing: 0em; |
||||
display: inline-block; |
||||
font-variation-settings: 'opsz' auto; |
||||
background: linear-gradient(240deg, #176cff 8%, #0f194c 31%); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
background-clip: text; |
||||
text-fill-color: transparent; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue