Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
60cf8b29 1 parent dc7b2b17

chore: 重命名设计文件目录并更新相关代码文件路径 

- 将中文目录名改为英文，例如“我的”改为“done/我的”
- 更新对应的Vue组件和CSS文件路径
- 删除旧的目录结构，保持项目文件组织一致性
Inline Side-by-side
Showing 33 changed files with 1208 additions and 0 deletions
.page {
position: relative;
width: 393px;
height: 999px;
overflow: hidden;
}
.block_1 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
padding: 24px 24px 31px 24px;
}
.box_1 {
width: 345px;
}
.text_1 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.label_1 {
width: 24px;
height: 24px;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 24px 289px 0 0;
}
.text-wrapper_1 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 8px;
padding: 1px 234px 21px 11px;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 16px 317px 0 0;
}
.box_2 {
margin: 8px 237px 0 0;
}
.thumbnail_1 {
width: 20px;
height: 20px;
}
.text_5 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-left: 8px;
}
.thumbnail_2 {
width: 20px;
height: 20px;
margin-left: 24px;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-left: 8px;
}
.text_7 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 16px 317px 0 0;
}
.text-wrapper_2 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 8px;
padding: 1px 262px 21px 11px;
}
.text_8 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_9 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 16px 317px 0 0;
}
.box_3 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
width: 345px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 8px;
padding: 0 1px 14px 11px;
}
.text_10 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.thumbnail_3 {
width: 14px;
height: 14px;
margin-top: 15px;
}
.text_11 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 16px 275px 0 0;
}
.text-wrapper_3 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
width: 345px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 8px;
padding: 1px 11px 11px 11px;
}
.text_12 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_13 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-top: 10px;
}
.text_14 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 16px 289px 0 0;
}
.image-text_1 {
width: 56px;
margin: 8px 289px 0 0;
}
.thumbnail_4 {
width: 20px;
height: 20px;
}
.text-group_1 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image-text_2 {
width: 56px;
margin: 8px 289px 0 0;
}
.thumbnail_5 {
width: 20px;
height: 20px;
}
.text-group_2 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image-text_3 {
width: 56px;
margin: 8px 289px 0 0;
}
.thumbnail_6 {
width: 20px;
height: 20px;
}
.text-group_3 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.box_4 {
width: 56px;
margin: 8px 289px 0 0;
}
.thumbnail_7 {
width: 20px;
height: 20px;
}
.text_15 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_16 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 16px 289px 0 0;
}
.image-text_4 {
width: 84px;
margin: 8px 261px 0 0;
}
.thumbnail_8 {
width: 20px;
height: 20px;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image-text_5 {
width: 84px;
margin: 8px 261px 0 0;
}
.thumbnail_9 {
width: 20px;
height: 20px;
}
.text-group_5 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image-text_6 {
width: 84px;
margin: 8px 261px 0 0;
}
.thumbnail_10 {
width: 20px;
height: 20px;
}
.text-group_6 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image-text_7 {
width: 84px;
margin: 8px 261px 0 0;
}
.thumbnail_11 {
width: 20px;
height: 20px;
}
.text-group_7 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_17 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 23px 275px 0 0;
}
.text-wrapper_4 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
width: 345px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 8px;
padding: 1px 11px 11px 11px;
}
.text_18 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_19 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-top: 10px;
}
.box_5 {
width: 345px;
margin-top: 61px;
}
.text-wrapper_5 {
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
border: 1px solid rgba(0, 122, 255, 1);
padding: 9px 67px 9px 67px;
}
.text_20 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
.text-wrapper_6 {
background-color: rgba(0, 122, 255, 1);
border-radius: 6px;
padding: 10px 51px 10px 51px;
}
.text_21 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
<template>
<div class="page flex-col">
<div class="block_1 flex-col">
<div class="box_1 flex-row justify-between">
<span class="text_1">申请计划书</span>
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9edea6fd27cf6cb2ff57c90a0834dcda1f86b6072ce07f5e7e07069c2d3b3e9e"
/>
</div>
<span class="text_2">客户姓名</span>
<div class="text-wrapper_1 flex-col">
<span class="text_3">请输入客户姓名</span>
</div>
<span class="text_4">性别</span>
<div class="box_2 flex-row">
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa89ac8577908dfb2901e1067741dcdc9a5b58739da04a5243e45c296275f5ef"
/>
<span class="text_5">男</span>
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng86258dc38e0dde555b09ba68a94fb042ce0172628791dc178dd1a7c0c89a824f"
/>
<span class="text_6">女</span>
</div>
<span class="text_7">年龄</span>
<div class="text-wrapper_2 flex-col">
<span class="text_8">请输入年龄</span>
</div>
<span class="text_9">行业</span>
<div class="box_3 flex-row justify-between">
<span class="text_10">请选择职业</span>
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf768ccd4a7e2a9d761be1bbd425d7c09e15f44c66570d21e5e9121448ccada5"
/>
</div>
<span class="text_11">年收入区间</span>
<div class="text-wrapper_3 flex-row justify-between">
<span class="text_12">请输入年收入</span>
<span class="text_13">万元</span>
</div>
<span class="text_14">家庭结构</span>
<div class="image-text_1 flex-row justify-between">
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e"
/>
<span class="text-group_1">配偶</span>
</div>
<div class="image-text_2 flex-row justify-between">
<img
class="thumbnail_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
/>
<span class="text-group_2">子女</span>
</div>
<div class="image-text_3 flex-row justify-between">
<img
class="thumbnail_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
/>
<span class="text-group_3">父母</span>
</div>
<div class="box_4 flex-row justify-between">
<img
class="thumbnail_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
/>
<span class="text_15">其他</span>
</div>
<span class="text_16">保险需求</span>
<div class="image-text_4 flex-row justify-between">
<img
class="thumbnail_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e"
/>
<span class="text-group_4">人身保障</span>
</div>
<div class="image-text_5 flex-row justify-between">
<img
class="thumbnail_9"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
/>
<span class="text-group_5">财富传承</span>
</div>
<div class="image-text_6 flex-row justify-between">
<img
class="thumbnail_10"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
/>
<span class="text-group_6">子女教育</span>
</div>
<div class="image-text_7 flex-row justify-between">
<img
class="thumbnail_11"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
/>
<span class="text-group_7">养老规划</span>
</div>
<span class="text_17">期望收益率</span>
<div class="text-wrapper_4 flex-row justify-between">
<span class="text_18">请输入期望收益率</span>
<span class="text_19">%</span>
</div>
<div class="box_5 flex-row justify-between">
<div class="text-wrapper_5 flex-col">
<span class="text_20">取消</span>
</div>
<div class="text-wrapper_6 flex-col">
<span class="text_21">提交申请</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
.page {
position: relative;
width: 393px;
height: 852px;
overflow: hidden;
padding-top: 0;
padding-bottom: 78px;
padding-left: 0;
padding-right: 0;
}
.block_1 {
background-color: rgba(249, 250, 251, 1);
padding: 16px 16px 49px 16px;
}
.section_1 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
padding: 20px 20px 20px 20px;
}
.box_1 {
width: 321px;
}
.text_1 {
overflow-wrap: break-word;
color: rgba(17, 24, 39, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.thumbnail_1 {
width: 20px;
height: 20px;
margin: 4px 0 4px 0;
}
.box_2 {
width: 120px;
margin: 20px 201px 0 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-top: 6px;
}
.text-wrapper_1 {
background-color: rgba(239, 246, 255, 1);
border-radius: 6px;
padding: 6px 12px 6px 12px;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.box_3 {
width: 120px;
margin: 20px 201px 0 0;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-top: 6px;
}
.text-wrapper_2 {
background-color: rgba(239, 246, 255, 1);
border-radius: 6px;
padding: 6px 12px 6px 12px;
}
.text_5 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(17, 24, 39, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 20px 257px 0 0;
}
.text_7 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 20px 293px 0 0;
}
.box_4 {
margin: 8px 217px 0 0;
}
.thumbnail_2 {
width: 18px;
height: 18px;
margin: 1px 0 1px 0;
}
.text_8 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-left: 8px;
}
.image-text_1 {
width: 40px;
margin-left: 24px;
}
.thumbnail_3 {
width: 18px;
height: 18px;
margin: 1px 0 1px 0;
}
.text-group_1 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.box_5 {
width: 321px;
margin-top: 20px;
}
.text_9 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image-text_2 {
width: 68px;
}
.text-group_2 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.thumbnail_4 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.box_6 {
width: 120px;
margin: 20px 201px 0 0;
}
.text_10 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-top: 6px;
}
.text-wrapper_3 {
background-color: rgba(239, 246, 255, 1);
border-radius: 6px;
padding: 6px 12px 6px 12px;
}
.text_11 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_12 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 20px 265px 0 0;
}
.grid_1 {
width: 236px;
height: 88px;
flex-wrap: wrap;
margin: 12px 85px 0 0;
}
.text-wrapper_4 {
background-color: rgba(0, 122, 255, 1);
border-radius: 8px;
height: 38px;
width: 76px;
margin: 0 12px 12px 0;
padding: 8px 16px 10px 16px;
}
.text_13 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_5 {
background-color: rgba(249, 250, 251, 1);
border-radius: 8px;
height: 38px;
border: 1px solid rgba(229, 231, 235, 1);
width: 68px;
margin: 0 12px 12px 0;
padding: 8px 15px 8px 15px;
}
.text_14 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_6 {
background-color: rgba(249, 250, 251, 1);
border-radius: 8px;
height: 38px;
border: 1px solid rgba(229, 231, 235, 1);
margin-bottom: 12px;
width: 68px;
padding: 8px 15px 8px 15px;
}
.text_15 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_7 {
background-color: rgba(249, 250, 251, 1);
border-radius: 8px;
height: 38px;
border: 1px solid rgba(229, 231, 235, 1);
width: 60px;
margin: 0 12px 12px 0;
padding: 8px 15px 8px 15px;
}
.text_16 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_8 {
background-color: rgba(249, 250, 251, 1);
border-radius: 8px;
height: 38px;
border: 1px solid rgba(229, 231, 235, 1);
margin-right: NaNpx;
margin-bottom: 12px;
width: 68px;
padding: 8px 15px 8px 15px;
}
.text_17 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_18 {
overflow-wrap: break-word;
color: rgba(55, 65, 81, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin: 20px 265px 0 0;
}
.text-wrapper_9 {
background-color: rgba(249, 250, 251, 1);
border-radius: 8px;
width: 321px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 8px;
padding: 12px 12px 12px 12px;
}
.text_19 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.text_20 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-top: 2px;
}
.section_2 {
width: 345px;
margin: 51px 13px 0 3px;
}
.text-wrapper_10 {
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
border: 1px solid rgba(0, 122, 255, 1);
padding: 9px 67px 9px 67px;
}
.text_21 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
.text-wrapper_11 {
background-color: rgba(0, 122, 255, 1);
border-radius: 6px;
padding: 10px 51px 10px 51px;
}
.text_22 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
<template>
<div class="page flex-col">
<div class="block_1 flex-col">
<div class="section_1 flex-col">
<div class="box_1 flex-row justify-between">
<span class="text_1">保险计划书申请</span>
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng43284a8c3fc98c60509d6d415fed8113414c4c0b072fa0f3b41fc26e76a03b15"
/>
</div>
<div class="box_2 flex-row justify-between">
<span class="text_2">币种</span>
<div class="text-wrapper_1 flex-col">
<span class="text_3">美元保单</span>
</div>
</div>
<div class="box_3 flex-row justify-between">
<span class="text_4">计划</span>
<div class="text-wrapper_2 flex-col">
<span class="text_5">基础情景</span>
</div>
</div>
<span class="text_6">附加计划</span> <span class="text_7">性别</span>
<div class="box_4 flex-row">
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1015590381802ed3f770814c3e05e4b73e6534f72e97a9a0721c459ed1dbac6a"
/>
<span class="text_8">女</span>
<div class="image-text_1 flex-row justify-between">
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb0bb17420dba3691281e919f69d1e06a69d343e53ee68ad570ec2fe340cdb09c"
/>
<span class="text-group_1">男</span>
</div>
</div>
<div class="box_5 flex-row justify-between">
<span class="text_9">年龄</span>
<div class="image-text_2 flex-row justify-between">
<span class="text-group_2">30周岁</span>
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f1ca24a37fc014649249f2a5db80cdec300bf86076429fb76cc42dff9b59f3d"
/>
</div>
</div>
<div class="box_6 flex-row justify-between">
<span class="text_10">保险期间</span>
<div class="text-wrapper_3 flex-col">
<span class="text_11">终身</span>
</div>
</div>
<span class="text_12">交费期间</span>
<div class="grid_1 flex-row">
<div class="text-wrapper_4 flex-col">
<span class="text_13">10年交</span>
</div>
<div class="text-wrapper_5 flex-col">
<span class="text_14">3年交</span>
</div>
<div class="text-wrapper_6 flex-col">
<span class="text_15">5年交</span>
</div>
<div class="text-wrapper_7 flex-col">
<span class="text_16">躸交</span>
</div>
<div class="text-wrapper_8 flex-col">
<span class="text_17">2年交</span>
</div>
</div>
<span class="text_18">年交保费</span>
<div class="text-wrapper_9 flex-row justify-between">
<span class="text_19">100000</span> <span class="text_20">美元</span>
</div>
</div>
<div class="section_2 flex-row justify-between">
<div class="text-wrapper_10 flex-col">
<span class="text_21">取消</span>
</div>
<div class="text-wrapper_11 flex-col">
<span class="text_22">提交申请</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />