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> |
<template> |
||||||
<div></div> |
<div class="welcome-con"> |
||||||
|
<div class="welcome-title">{{ welcomeWord }}</div> |
||||||
|
<div class="sub-title">{{ welcomeSubWord }}</div> |
||||||
|
</div> |
||||||
</template> |
</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