zzak/x-forend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端重构

Browse Source
This commit is contained in:
anonymous
2025-01-07 18:04:40 +08:00
parent dbb57f07c3
commit 21d8f75f6a
43 changed files with 705 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/invest/index.vue
+74 -46
View File
@@ -3,51 +3,96 @@
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '投资理财',
navigationBarTitleText: '理财',
},
}
</route>
<template>
<view class="invest-page">
<NavBar>
<template #right>
<view @click="onGoInvestDetail" class="text-14 text-#486CCF">投资明细</view>
</template>
</NavBar>
<view class="flex mt-30 flex-col mx-15 rounded-10 px-40 py-32 main-content">
<view class="text-14 text-#6784C7">我的投资金</view>
<view class="text-35 leading-35 mt-10 text-#BE7143 font-bold">
{{ userStore.userInfo?.money }}
<NavBar titleColor="#333" />
<view class="py-20 flex flex-col mx-15 rounded-20 main-content text-white">
<view class="text-14 pl-15">保险概览</view>
<view class="flex mt-30">
<view class="flex-1 text-center">
<view class="text-14">全部</view>
<view class="text-16 font-bold mt-15">2份</view>
</view>
<view class="flex-1 text-center">
<view class="text-14">养老</view>
<view class="text-16 font-bold mt-15">1份</view>
</view>
<view class="flex-1 text-center">
<view class="text-14">医疗</view>
<view class="text-16 font-bold mt-15">未保障</view>
</view>
</view>
</view>
<view class="mt-100">
<view class="flex p-15 mt-15">
<view class="px-24 py-4 rounded-full btn-gradient text-white text-14">养老</view>
<view class="ml-15 px-24 py-4 rounded-full bg-#DEEBFF text-#3B81F3 text-14">医疗</view>
</view>
<view>
<view
v-for="item in investmentList"
:key="item.id"
class="invest-item relative flex flex-col items-center pt-15"
class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
>
<view class="text-15 text-#3F88F6">{{ item.name }}</view>
<view class="flex w-full mt-15">
<view class="flex-1 text-center">
<view class="text-22 text-#333 font-bold">{{ item.money }}</view>
<view class="text-12 mt-4 text-blue-red">投资金额</view>
<view class="flex">
<image
class="rounded-10 w-100 h-100"
mode="aspectFill"
src="https://picsum.photos/100/100"
/>
<view class="flex-1 ml-15">
<view class="text-15 text-#333 font-bold">{{ item.name }}</view>
<view class="flex items-center mt-10">
<view class="px-14 py-2 text-12 text-#D6A165 rounded-2 bg-#FFEBD4">商业型</view>
<view class="ml-8 px-14 py-2 text-12 text-#3B81F3 rounded-2 bg-#D4E8FF">低风险</view>
</view>
<view class="text-12 mt-15 text-#999">
此处是产品简介，此处是产品简介，此处是产品简介，此处是产
</view>
</view>
</view>
<view class="flex items-center mt-15">
<view class="flex-1 text-center">
<view class="text-22 text-#FF3B30 font-bold">{{ item.dividend }}</view>
<view class="text-12 mt-4 text-blue-red">每日分红</view>
<view class="text-15 text-#FF3B30">1.99(%)</view>
<view class="text-14 text-#999">日收益</view>
</view>
<view class="text-#D9D9D9">|</view>
<view class="flex-1 text-center">
<view class="text-15 text-#FF3B30">365(天)</view>
<view class="text-14 text-#999">周期</view>
</view>
</view>
<view class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15">
购买
</view>
</view>
<view class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15">
<view class="flex">
<image
class="rounded-10 w-100 h-100"
mode="aspectFill"
src="https://picsum.photos/100/100"
/>
<view class="flex-1 ml-15">
<view class="text-15 text-#333 font-bold">好医保·长期医保(旗舰版)</view>
<view class="text-12 mt-15 text-#999">
此处是产品简介，此处是产品简介，此处是产品简介，此处是产
</view>
</view>
</view>
<view
class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-blue-red"
@click="onInvest(item)"
class="text-center text-15 text-white rounded-full py-8 border-#3B81F3 border-1 border-solid mt-15"
>
立即投资
<text class="text-gradient">查看权益</text>
</view>
<view
class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-blue-red"
>
{{ item.label }}
<view class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15">
我要投保
</view>
</view>
</view>
@@ -112,31 +157,14 @@ const onInvest = mergeStep(async (item: any) => {
})
</script>
<style>
<style scoped>
.invest-page {
min-height: 100vh;
padding-bottom: 100px;
background-color: #ebbf92;
background-image: url('@/static/images/invest/bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top -80rpx center;
background-size: 100%;
}
.invest-item {
width: 690rpx;
height: 352rpx;
margin: 0 auto 30rpx;
background-image: url('@/static/images/invest/item-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background: linear-gradient(180deg, #f4fbff 0%, #f7f7f7 100%);
}
.main-content {
background-image: url('@/static/images/invest/main-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background: linear-gradient(90deg, #71a4f8 0%, #3b81f3 103.83%);
}
.bg-blue-red {
background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);