Skip to content

M
mongo-ui
Commit be4aa655 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

添加保单详情

parent 0c0e7e95
Hide whitespace changes
Inline Side-by-side
Showing with 1781 additions and 156 deletions
public/index.html
View file @ be4aa655
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1 ,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
......
src/assets/icons/svg/counselor-active.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-283.000000, -1567.000000)">
<g id="编组-11备份-6" transform="translate(58.000000, 1561.000000)">
<g id="编组-6备份" transform="translate(225.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-6"></path>
<path d="M9,5.75 C7.20507456,5.75 5.75,7.20507456 5.75,9 L5.75,16.2307692 C5.75,18.0256947 7.20507456,19.4807692 9,19.4807692 L13.3696326,19.4807692 L16.3210477,21.8163618 C16.42618,21.8995579 16.5782228,21.8850134 16.6656755,21.7833944 L18.6473024,19.4807692 L19,19.4807692 C20.7949254,19.4807692 22.25,18.0256947 22.25,16.2307692 L22.25,9 C22.25,7.20507456 20.7949254,5.75 19,5.75 L9,5.75 Z" id="矩形备份-10" stroke="#000000" stroke-width="1.5" fill="#FFC841"></path>
<rect id="矩形备份-4" stroke="#000000" x="11.5" y="12.5" width="6" height="1" rx="0.5"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/counselor.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-283.000000, -1403.000000)">
<g id="编组-11备份-4" transform="translate(58.000000, 1397.000000)">
<g id="编组-6备份" transform="translate(225.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-6"></path>
<path d="M9,5.75 C7.20507456,5.75 5.75,7.20507456 5.75,9 L5.75,16.2307692 C5.75,18.0256947 7.20507456,19.4807692 9,19.4807692 L13.3696326,19.4807692 L16.3210477,21.8163618 C16.42618,21.8995579 16.5782228,21.8850134 16.6656755,21.7833944 L18.6473024,19.4807692 L19,19.4807692 C20.7949254,19.4807692 22.25,18.0256947 22.25,16.2307692 L22.25,9 C22.25,7.20507456 20.7949254,5.75 19,5.75 L9,5.75 Z" id="矩形备份-10" stroke="#000000" stroke-width="1.5"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/customer-service-concat.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 6</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="保单详情-已开通续保" transform="translate(-80.000000, -1063.000000)" fill-rule="nonzero">
<g id="Group-6" transform="translate(80.000000, 1060.000000)">
<g id="Group-5" transform="translate(0.000000, 2.000000)">
<g id="Group-3">
<rect id="Rectangle" x="0" y="0" width="16" height="16"></rect>
<path d="M13.9636348,10.3999957 C13.9636348,10.801657 13.631512,11.1272699 13.2218165,11.1272699 C12.8121227,11.1272699 12.4799982,10.8016587 12.4799982,10.3999957 L12.4787618,9.33260122 C12.4775255,8.75878233 12.4762891,8.31320678 12.4753,8.29502437 C12.3645218,5.81574288 10.2965814,3.85454159 7.78181933,3.85454159 C5.27076056,3.85454159 3.20480981,5.80993038 3.08858204,8.28534254 C3.08784021,8.3042516 3.08610932,8.75128232 3.08512022,9.32704099 L3.08363659,10.4000128 C3.08363659,10.8016741 2.75151379,11.127287 2.3418183,11.127287 C1.93212454,11.127287 1.6,10.8016758 1.6,10.4000128 L1.60148365,9.32413302 C1.60272001,8.62449636 1.60395637,8.27322319 1.60667636,8.21867767 C1.75874905,4.96994637 4.47453786,2.4 7.78182204,2.4 C11.0940439,2.4 13.8120525,4.97720774 13.9574545,8.23152996 C13.9599273,8.28365127 13.9611636,8.63250091 13.9624,9.32995575 L13.9636364,10.4000179 L13.9636348,10.3999957 Z M3.08363773,9.67272153 L3.08363774,11.8545424 L3.08363773,11.8544312 C3.0836378,12.2560925 3.41576054,12.5817054 3.82545603,12.5817054 C4.23506112,12.5817053 4.56714741,12.2562288 4.56727433,11.8546545 L4.56727433,10.4001078 C4.56727433,9.9984465 4.23515152,9.6728336 3.82545603,9.6728336 L3.08363773,9.6728336 L3.08363773,9.67272153 Z M1.60000279,8.21817484 L3.82545604,8.21817484 C5.05453895,8.21817479 6.0509091,9.19500844 6.0509091,10.3999957 L6.0509091,11.8545424 C6.0509091,13.059528 5.05453895,14.0363633 3.82545594,14.0363633 C2.59637294,14.0363633 1.60000279,13.059528 1.60000279,11.8545424 L1.60000279,8.21817484 Z M12.48,9.67272153 L12.4799999,11.8545424 L12.48,11.8544311 C12.48,12.2560924 12.1478771,12.5817053 11.7381817,12.5817053 C11.3285766,12.5817053 10.9964885,12.2562287 10.9963634,11.8546544 L10.9963634,10.4001077 C10.9963634,9.99844628 11.3284862,9.67283338 11.7381817,9.67283338 L12.48,9.67283338 L12.48,9.67272153 Z M13.9636348,8.21817484 L11.7381816,8.21817484 C10.5090985,8.21817489 9.5127284,9.19501014 9.5127284,10.3999957 C9.5127284,10.3999957 9.5127284,10.3999957 9.5127284,10.3999957 L9.5127284,11.8545424 L9.5127284,11.8545427 C9.51272858,13.0595283 10.5090985,14.0363636 11.7381815,14.0363636 C12.9672646,14.0363635 13.9636347,13.0595283 13.9636347,11.8545427 L13.9636348,8.21817484 Z" id="Shape" fill="#999999"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/go-home.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 6</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="保单详情-已开通续保" transform="translate(-212.000000, -1062.000000)">
<g id="Group-6" transform="translate(80.000000, 1060.000000)">
<g id="Group-5-Copy" transform="translate(132.000000, 2.000000)">
<g id="Group-3">
<rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="16" height="16"></rect>
<path d="M3.82078079,4.76015437 C3.15534898,5.16965087 2.75,5.89504898 2.75,6.67638558 L2.75,12 C2.75,13.2426407 3.75735931,14.25 5,14.25 L12,14.25 C13.2426407,14.25 14.25,13.2426407 14.25,12 L14.25,6.67638558 C14.25,5.89504898 13.844651,5.16965087 13.1792192,4.76015437 L9.67921921,2.60630822 C8.9560535,2.16128317 8.0439465,2.16128317 7.32078079,2.60630822 L3.82078079,4.76015437 Z" id="矩形备份-3" stroke="#999999" stroke-width="1.5"></path>
<path d="M8.5,13.8 L8.5,10.2810245" id="Path-3" stroke="#979797" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/home-active.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-85.000000, -1403.000000)">
<g id="编组-11备份-4" transform="translate(58.000000, 1397.000000)">
<g id="编组-5备份" transform="translate(27.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-4"></path>
<g id="编组-13" transform="translate(5.000000, 4.000000)" stroke="#000000">
<path d="M1.82078079,5.29861591 C1.15534898,5.70811241 0.75,6.43351052 0.75,7.21484712 L0.75,16.3846154 C0.75,17.6272561 1.75735931,18.6346154 3,18.6346154 L15,18.6346154 C16.2426407,18.6346154 17.25,17.6272561 17.25,16.3846154 L17.25,7.21484712 C17.25,6.43351052 16.844651,5.70811241 16.1792192,5.29861591 L10.1792192,1.60630822 C9.4560535,1.16128317 8.5439465,1.16128317 7.82078079,1.60630822 L1.82078079,5.29861591 Z" id="矩形备份-3" stroke-width="1.5" fill="#FFC841"></path>
<rect id="矩形备份-4" x="6.5" y="13.5" width="6" height="1" rx="0.5"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/home.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-85.000000, -1485.000000)">
<g id="编组-11备份-5" transform="translate(58.000000, 1479.000000)">
<g id="编组-5备份" transform="translate(27.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-4"></path>
<g id="编组-13" transform="translate(5.000000, 4.000000)" stroke="#000000" stroke-width="1.5">
<path d="M1.82078079,5.29861591 C1.15534898,5.70811241 0.75,6.43351052 0.75,7.21484712 L0.75,16.3846154 C0.75,17.6272561 1.75735931,18.6346154 3,18.6346154 L15,18.6346154 C16.2426407,18.6346154 17.25,17.6272561 17.25,16.3846154 L17.25,7.21484712 C17.25,6.43351052 16.844651,5.70811241 16.1792192,5.29861591 L10.1792192,1.60630822 C9.4560535,1.16128317 8.5439465,1.16128317 7.82078079,1.60630822 L1.82078079,5.29861591 Z" id="矩形备份-3"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/payment-record.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 14</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="保单详情-已开通续保" transform="translate(-77.000000, -81.000000)" fill-rule="nonzero">
<g id="Group" transform="translate(20.000000, 77.000000)">
<g id="Group-14" transform="translate(63.000000, 10.000000) rotate(-90.000000) translate(-63.000000, -10.000000) translate(57.000000, 4.000000)">
<rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
<path d="M7.24329415,4.82588238 L9.49793174,7.33103527 C9.86739076,7.74154529 9.83411235,8.37383513 9.42360233,8.74329415 C9.23997762,8.90855638 9.00167937,9 8.7546376,9 L4.2453624,9 C3.69307765,9 3.2453624,8.55228475 3.2453624,8 C3.2453624,7.75295822 3.33680602,7.51465998 3.50206826,7.33103527 L5.75670585,4.82588238 C6.12616487,4.41537236 6.75845471,4.38209395 7.16896473,4.75155297 C7.19502719,4.77500918 7.21983793,4.79981992 7.24329415,4.82588238 Z" id="Triangle" fill="#FFFFFF" transform="translate(6.500000, 6.500000) scale(1, -1) translate(-6.500000, -6.500000) "></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/product-active.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-184.000000, -1485.000000)">
<g id="编组-11备份-5" transform="translate(58.000000, 1479.000000)">
<g id="编组备份-2" transform="translate(126.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-5"></path>
<g id="编组-15" transform="translate(5.000000, 4.000000)" stroke="#000000" stroke-width="1.5">
<path d="M3.02605117,17.0160459 L7.7777771,18.9445433 C8.5615431,19.2626363 9.43844501,19.262631 10.2222071,18.9445284 L14.9742706,17.0158261 C16.3977808,16.0434938 17.25,14.4362235 17.25,12.7176355 L17.25,2.78649268 C17.2499806,2.67295716 17.169713,2.57346295 17.0551677,2.54814198 L9.26971899,0.827697191 C9.09204917,0.788435341 8.90794979,0.7884352 8.73027991,0.827696777 L0.944841432,2.54812675 C0.830256744,2.57347673 0.750000028,2.67298015 0.750000015,2.78635037 L0.749999994,12.7184474 C0.750403915,14.4371009 1.60267341,16.043964 3.02605117,17.0160459 Z" id="路径" fill="#FFC841"></path>
<rect id="矩形备份-4" x="6.75" y="10.15" width="4.5" height="1" rx="0.5"></rect>
<path d="M6.75,10.15 L11.25,10.15 L6.75,10.15 Z" id="矩形备份-4" transform="translate(9.000000, 10.150000) scale(-1, 1) rotate(90.000000) translate(-9.000000, -10.150000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/product.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-184.000000, -1403.000000)">
<g id="编组-11备份-4" transform="translate(58.000000, 1397.000000)">
<g id="编组备份-2" transform="translate(126.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-5"></path>
<path d="M8.02605117,21.0160459 L12.7777771,22.9445433 C13.5615431,23.2626363 14.438445,23.262631 15.2222071,22.9445284 L19.9742706,21.0158261 C21.3977808,20.0434938 22.25,18.4362235 22.25,16.7176355 L22.25,6.78649268 C22.2499806,6.67295716 22.169713,6.57346295 22.0551677,6.54814198 L14.269719,4.82769719 C14.0920492,4.78843534 13.9079498,4.7884352 13.7302799,4.82769678 L5.94484143,6.54812675 C5.83025674,6.57347673 5.75000003,6.67298015 5.75000001,6.78635037 L5.74999999,16.7184474 C5.75040392,18.4371009 6.60267341,20.043964 8.02605117,21.0160459 Z" id="路径" stroke="#000000" stroke-width="1.5"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/user-active.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-379.000000, -1649.000000)">
<g id="编组-11备份-7" transform="translate(58.000000, 1567.000000)">
<g id="编组-7备份" transform="translate(321.000000, 82.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-8"></path>
<g id="编组-4备份" transform="translate(5.000000, 5.000000)" stroke="#000000" stroke-width="1.5">
<circle id="Oval-备份" fill="#FFC842" cx="9" cy="9" r="8.25"></circle>
<g id="编组-11" transform="translate(6.000000, 7.000000)" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.5,0 L0.5,2" id="路径-11"></path>
<path d="M6,0 L6,2" id="路径-11"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/user.svg 0 → 100644
View file @ be4aa655
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 5备份</title>
<desc>Created with Sketch.</desc>
<g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="规范2" transform="translate(-379.000000, -1403.000000)">
<g id="编组-11备份-4" transform="translate(58.000000, 1397.000000)">
<g id="编组-7备份" transform="translate(321.000000, 6.000000)">
<path d="M18.2,0 C21.049,0 22.4541333,0 23.9555556,0.466666667 C25.6193,1.07963333 26.9203667,2.3807 27.5333333,4.04444444 C28,5.54563333 28,6.95123333 28,9.8 L28,18.2 C28,21.049 28,22.4541333 27.5333333,23.9555556 C26.9203667,25.6193 25.6193,26.9203667 23.9555556,27.5333333 C22.4541333,28 21.049,28 18.2,28 L9.8,28 C6.951,28 5.54563333,28 4.04444444,27.5333333 C2.3807,26.9203667 1.07963333,25.6193 0.466666667,23.9555556 C0,22.4541333 0,21.049 0,18.2 L0,9.8 C0,6.95123333 0,5.54563333 0.466666667,4.04444444 C1.07963333,2.3807 2.3807,1.07963333 4.04444444,0.466666667 C5.54563333,0 6.951,0 9.8,0 L18.2,0 Z" id="Icon-Shape-备份-8"></path>
<g id="编组-4备份" transform="translate(5.000000, 5.000000)" stroke="#000000" stroke-width="1.5">
<circle id="Oval-备份" cx="9" cy="9" r="8.25"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/SvgIcon.vue
View file @ be4aa655
<template> <template>
<svg :class="svgClass" aria-hidden="true"> <svg :class="[className, 'svg-icon']" aria-hidden="true">
<use :xlink:href="iconName" /> <use :xlink:href="iconName" />
</svg> </svg>
</template> </template>
...@@ -20,13 +20,6 @@ export default { ...@@ -20,13 +20,6 @@ export default {
computed: { computed: {
iconName() { iconName() {
return `#icon-${this.iconClass}`; return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
} }
} }
}; };
......
src/components/Tabbar.vue 0 → 100644
View file @ be4aa655
<template>
<cr-tabbar
class="mongo-tabbar"
:value="activeIdx"
@input="oninput"
active-color="#333"
inactive-color="#666"
>
<cr-tabbar-item v-for="(item, index) in tabbarData" :key="item.name">
<div class="mongo-tabbar-item">
<svg-icon
:icon-class="[index === activeIdx ? item.activeIcon : item.icon]"
:class-name="[
{ 'mongo-tabbar-item-svg_active': index === activeIdx },
'mongo-tabbar-item-svg'
]"
/>
<span class="mongo-tabbar-item-name">{{ item.name }}</span>
</div>
</cr-tabbar-item>
</cr-tabbar>
</template>
<script>
import { mapState, mapMutations } from "vuex";
const route = ["/goods", "/user"];
const tabbarData = [
{
name: "产品",
path: "/goods",
icon: "product",
activeIcon: "product-active"
},
{
name: "我的",
path: "/user",
icon: "user",
activeIcon: "user-active"
}
];
export default {
name: "Tabbar",
data() {
return {
tabbarData
};
},
computed: {
...mapState(["activeIdx"])
},
created() {
if (this.$route.path !== route[this.activeIdx] && route.includes(this.$route.path)) {
this.setActiveIdx(route.indexOf(this.$route.path));
}
},
methods: {
...mapMutations(["setActiveIdx"]),
oninput(idx) {
this.setActiveIdx(idx);
this.$router.push(route[idx]);
}
}
};
</script>
<style lang="less">
.mongo-tabbar {
position: fixed;
bottom: 0;
box-sizing: border-box;
height: 49px;
padding: 5px 0 2px 0;
&-item {
display: flex;
flex-direction: column;
align-items: center;
width: 35px;
&-svg {
width: 28px;
height: 28px;
display: inline-block;
&_active {
display: none;
}
}
&-name {
font-size: 10px;
font-weight: 400;
color: #7f8389;
line-height: 14px;
}
}
/deep/ .cr-tabbar-item--active {
.mongo-tabbar-item-name {
color: #000000;
}
.mongo-tabbar-item-svg {
display: none;
&_active {
display: inline-block;
}
}
}
}
</style>
src/router/index.js
View file @ be4aa655
import Vue from "vue"; import Vue from "vue";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import Home from "../views/Home.vue"; // import Home from "../views/Home.vue";
Vue.use(VueRouter); Vue.use(VueRouter);
...@@ -42,13 +42,37 @@ const routes = [ ...@@ -42,13 +42,37 @@ const routes = [
path: "/user", path: "/user",
name: "User", name: "User",
component: () => import("../views/User/index.vue") component: () => import("../views/User/index.vue")
},
{
path: "/policy",
name: "Policy",
component: () => import("../views/Policy/index.vue")
},
{
path: "/policy/detail",
name: "Detail",
component: () => import("../views/Policy/Detail/index.vue")
},
{
path: "/introduction",
name: "Introduction",
component: () => import("../views/Introduction/index.vue")
} }
]; ];
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
const router = new VueRouter({ const router = new VueRouter({
mode: "history", mode: "history",
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes,
scrollBehavior() {
return { x: 0, y: 0 };
}
}); });
export default router; export default router;
src/service/cherry-ui.js
View file @ be4aa655
...@@ -12,7 +12,7 @@ const { ...@@ -12,7 +12,7 @@ const {
Row, Row,
Col, Col,
Popup, Popup,
// Overlay, Overlay,
Divider, Divider,
// Loading, // Loading,
Toast, Toast,
...@@ -65,3 +65,4 @@ Vue.use(Tabbar); ...@@ -65,3 +65,4 @@ Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
Vue.use(Icon); Vue.use(Icon);
Vue.use(Sticky); Vue.use(Sticky);
Vue.use(Overlay);
src/store/index.js
View file @ be4aa655
...@@ -4,8 +4,20 @@ import Vuex from "vuex"; ...@@ -4,8 +4,20 @@ import Vuex from "vuex";
Vue.use(Vuex); Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: {}, state: {
mutations: {}, activeIdx: 0
actions: {}, },
mutations: {
setActiveIdx(state, value) {
console.log('setActiveIdx', value);
state.activeIdx = value;
}
},
actions: {
setActiveIdx(state, value) {
console.log('setActiveIdx', value);
state.activeIdx = value;
}
},
modules: {} modules: {}
}); });
src/style/var.less
View file @ be4aa655
...@@ -124,3 +124,7 @@ ...@@ -124,3 +124,7 @@
@tag-warning-light-background-color: #ffeab7; @tag-warning-light-background-color: #ffeab7;
@tag-warning-light-color: #eaad1a; @tag-warning-light-color: #eaad1a;
// User color
@user-background-color: #F4F4F4;
@user-module-background-color: #FFFFFF;
src/views/Goods/index.vue
View file @ be4aa655
...@@ -10,20 +10,22 @@ ...@@ -10,20 +10,22 @@
</cr-sticky> </cr-sticky>
<good-list :list="goodsList" /> <good-list :list="goodsList" />
<ai-test-tip /> <ai-test-tip />
<tabbar></tabbar>
</div> </div>
</template> </template>
<script> <script>
import AiTestTip from "./modules/AiTestTip"; import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList/index"; import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar";
import goodsList from "@/api/goodsList.mock"; import goodsList from "@/api/goodsList.mock";
export default { export default {
name: "GoodsList", name: "GoodsList",
components: { components: {
AiTestTip, AiTestTip,
GoodList GoodList,
Tabbar
}, },
data() { data() {
return { return {
......
src/views/Goods/modules/AiTestTip.vue
View file @ be4aa655
...@@ -35,6 +35,7 @@ export default { ...@@ -35,6 +35,7 @@ export default {
@import "../../../style/mixins.less"; @import "../../../style/mixins.less";
.ai-test { .ai-test {
margin-bottom: 49px;
padding: 20px 16px 25.5px; padding: 20px 16px 25.5px;
&-tip { &-tip {
text-align: center; text-align: center;
......
src/views/Introduction/index.less 0 → 100644
View file @ be4aa655
@import "../../style/var.less";
@import "../../style/mixins.less";
.itd {
position: absolute;
top: 0;
bottom: 0;
background-color: #FFFFFF;
&-divider {
margin: 0;
border-color: #ECE9E9;
}
&-head {
width: 100% !important;
& > div {
width: 100% !important;
z-index: 100;
}
/deep/ .cr-tabbar {
background-color: #f5f5f5;
font-size: @font-size-16;
padding: @padding-lg+1 0;
&-item {
position: relative;
&::after {
position: absolute;
top: 26px;
// transition: width .2s linear;
content: " ";
display: block;
width: 0;
height: 4px;
background: @orange-light;
border-radius: @border-radius-lx;
}
&--active {
font-weight: 600;
&::after {
width: 32px;
}
}
}
}
}
&-quali {
padding: 13px 20px 24px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
background-color: #FFFFFF;
&-item {
display: flex;
flex-direction: column;
&:not(:first-child), &:not(:last-child) {
margin: 24px 0px 24px;
}
&:first-child, &:last-child {
margin: 0;
}
&-title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-content {
padding: 13px 20px 16px;
background: #F6F7FA;
border-radius: 14px;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 18px;
}
&-extra {
padding: 20px 20px 16px;
background: #F6F7FA;
border-radius: 14px;
&:not(:last-child) {
margin: 10px 0;
}
&-desc {
margin-top: 12px;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 18px;
text-align: center;
}
}
}
}
&-product {
padding: 16px 20px 0;
&-pro {
display: flex;
&-title {
padding: 14px 0 31px 18px;
width: 121px;
background: #F6F7FA;
border-radius: 16px 0px 0px 0px;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 14px;
}
&-value {
flex: 1;
padding: 14px 0 28px 13px;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 14px;
}
}
&-comp {
display: flex;
&-title {
padding: 0 0 19px 18px;
width: 121px;
background: #F6F7FA;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 20px;
}
&-value {
flex: 1;
padding: 0 0 16px 13px;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
}
&-divider {
margin: 0;
border-color: #ECE9E9;
}
&-no {
display: flex;
&-title {
padding: 20px 0 0px 18px;
width: 121px;
border-radius: 0px 0px 0px 16px;
background: #F6F7FA;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 20px;
}
&-value {
flex: 1;
padding: 20px 0 16px 13px;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
}
}
&-comp {
padding: 16px 20px 0;
&-info {
display: flex;
&-title {
padding: 14px 0 31px 18px;
width: 121px;
background: #F6F7FA;
border-radius: 16px 0px 0px 0px;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 14px;
}
&-value {
flex: 1;
padding: 14px 0 28px 13px;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 14px;
}
}
&-branch {
display: flex;
&-title {
padding: 0 0 19px 18px;
width: 121px;
background: #F6F7FA;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 20px;
}
&-value {
flex: 1;
padding: 0 0 16px 13px;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
}
&-item {
display: flex;
&-title {
padding: 16px 0 16px 18px;
width: 121px;
background: #F6F7FA;
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 20px;
}
&-value {
flex: 1;
padding: 16px 0 16px 13px;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
&:last-child {
.itd-comp-item-title {
border-radius: 0 0 0 16px;
}
}
}
}
}
src/views/Introduction/index.vue 0 → 100644
View file @ be4aa655
<template>
<div class="itd">
<cr-sticky class="itd-head">
<cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
<cr-tabbar-item>经营资质</cr-tabbar-item>
<cr-tabbar-item>保险产品信息披露</cr-tabbar-item>
<cr-tabbar-item>合作保险公司披露</cr-tabbar-item>
</cr-tabbar>
</cr-sticky>
<component :is="comName"></component>
</div>
</template>
<script>
import "./index.less";
import BusinessQuali from "./modules/BusinessQuali";
import Company from "./modules/Company";
import Product from "./modules/Product";
const components = ["BusinessQuali", "Company", "Product"];
export default {
name: "PolicyList",
components: {
BusinessQuali,
Company,
Product
},
data() {
return {
active: 0
};
},
computed: {
comName: function() {
return components[this.active];
}
}
};
</script>
src/views/Introduction/modules/BusinessQuali.vue 0 → 100644
View file @ be4aa655
<template>
<div class="itd-quali">
<div class="itd-quali-item">
<p class="itd-quali-item-title">1. 主体名称和网址</p>
<div class="itd-quali-item-content">
中文名称：全天候保险代理股份有限公司<br />
中文简称：芒果保险<br />
网站地址：www.qthbx.com
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">2. 注册资本</p>
<div class="itd-quali-item-content">
人民币伍仟万元
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">3. 成立时间</p>
<div class="itd-quali-item-content">
2006年2月10日
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">4. 注册地址</p>
<div class="itd-quali-item-content">
北京市顺义区仁和镇顺通路25号5幢511-2室
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">5. 业务范围</p>
<div class="itd-quali-item-content">
在全国区域内（港、澳、台除外）代理销售保险产品；代理收取保险费；代理相关保险业务的损失勘察和理赔；中国保监会批准的其他业务。
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">6. 经营区域</p>
<div class="itd-quali-item-content">
在全国区域内（港、澳、台除外）
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">7. 法定代表人</p>
<div class="itd-quali-item-content">
陆慧瑗
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">8. 客服与消费者投诉电话</p>
<div class="itd-quali-item-content">
010-82194734
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">9.分支机构</p>
<div class="itd-quali-item-content">
分公司名称：<br />
办公地址：<br />
<br />
分公司名称：<br />
办公地址：<br />
<br />
分公司名称：<br />
办公地址：
</div>
</div>
<div class="itd-quali-item">
<p class="itd-quali-item-title">10. 相关资质</p>
<div class="itd-quali-item-content">
「芒果保险」是2020年成立的互联网保险平台，我们的网站经过中国银保监会核准具有互联网销售资质。
查询地址：http://icid.iachina.cn/选择“互联网保险信息披露＞中介类信息披露＞全天候保险代理股份有限公司”即可查看。
</div>
<div class="itd-quali-item-extra">
<cr-image width="295px" height="166px" fit="cover" src="" />
<p class="itd-quali-item-extra-desc">经营保险代理业务许可证</p>
</div>
<div class="itd-quali-item-extra">
<cr-image width="295px" height="166px" fit="cover" src="" />
<p class="itd-quali-item-extra-desc">营业执照</p>
</div>
</div>
</div>
</template>
<script>
import "../index.less";
import avatar from "@/assets/images/user/avatar@2x.png";
export default {
name: "BusinessQuali",
data() {
return {
avatar
};
}
};
</script>
src/views/Introduction/modules/Company.vue 0 → 100644
View file @ be4aa655
<template>
<div class="itd-product">
<div class="itd-product-pro">
<p class="itd-product-pro-title">保险产品名称</p>
<p class="itd-product-pro-value">万家保·重疾轻症险</p>
</div>
<div class="itd-product-comp">
<p class="itd-product-comp-title">保险公司</p>
<p class="itd-product-comp-value">华泰财产保险有限公司</p>
</div>
<cr-divider class="itd-divider" :hairline="false" />
<div class="itd-product-no">
<p class="itd-product-no-title">备案编号注册编号</p>
<p class="itd-product-no-value">
华泰财险重大疾病保险条款(B款) <br />
华泰财险附加重大疾病轻症综合保险条款<br />
华泰财险附加保险费分期支付条款<br />
<br />
C00015431912018061501152<br />
C00015432622017111500872<br />
C00015431922018061503991
</p>
</div>
</div>
</template>
<script>
import "../index.less";
export default {
name: "Company",
data() {
return {};
}
};
</script>
src/views/Introduction/modules/Product.vue 0 → 100644
View file @ be4aa655
<template>
<div class="itd-comp">
<div class="itd-comp-info">
<p class="itd-comp-info-title">保险公司名称</p>
<p class="itd-comp-info-value">华泰财产保险有限公司</p>
</div>
<div class="itd-comp-branch">
<p class="itd-comp-branch-title">已设分支机构</p>
<p class="itd-comp-branch-value">
北京、上海、天津、重庆、江苏、广东、陕西、四川、云南、辽宁、浙江、河北、湖南、湖北、安徽、山西、福建、山东、广西、河南、江西、深圳、青岛、大连、宁波、贵州、内蒙古、厦门、黑龙江、新疆、宁夏、吉林、甘肃
</p>
</div>
<cr-divider class="itd-divider" :hairline="false" />
<div class="itd-comp-item">
<p class="itd-comp-item-title">业务合作范围</p>
<p class="itd-comp-item-value">互联网保险业务</p>
</div>
<cr-divider class="itd-divider" :hairline="false" />
<div class="itd-comp-item">
<p class="itd-comp-item-title">保险公司网址</p>
<p class="itd-comp-item-value">http://pc.ehuatai.com</p>
</div>
<cr-divider class="itd-divider" :hairline="false" />
<div class="itd-comp-item">
<p class="itd-comp-item-title">客服电话</p>
<p class="itd-comp-item-value">400-609-5509</p>
</div>
</div>
</template>
<script>
import "../index.less";
export default {
name: "Product",
data() {
return {};
}
};
</script>
src/views/Policy/Detail/index.less 0 → 100644
View file @ be4aa655
.button() {
height: 28px;
border-radius: 8px;
border: 1px solid #787EFF;
font-size: 14px;
font-weight: 400;
color: #787EFF;
line-height: 16px;
&:first-child {
margin-right: 8px;
}
}
.card-head() {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
span:first-child {
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 400;
color: #787EFF;
line-height: 24px;
}
.svg-icon {
padding: 4px 0;
width: 16px;
height: 16px;
}
}
.card-body() {
div {
display: flex;
justify-content: space-between;
span:first-child {
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 24px;
}
}
}
.policy-detail {
position: relative;
background: #F6F6F6;
&:before {
position: absolute;
width: 375px;
height: 269px;
border: 0;
content: '';
background: linear-gradient(360deg,rgba(244,244,244,1) 0%,rgba(255,200,66,1) 100%);
}
&:after {
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
}
&-body {
position: absolute;
left: 0;
right: 0;
.Pdb-status {
margin: 32px 0 5px 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
}
.Pdb-payment {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 24px 20px;
padding-left: 4px;
width: 73px;
height: 20px;
background: #000000;
border-radius: 8px;
opacity: 0.2;
&-text {
margin-right: 1px;
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
line-height: 12px;
}
&-svg {
width: 12px;
height: 12px;
}
}
.Pdb-insurance {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
&-name {
margin-bottom: 12px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-no {
margin-bottom: 16px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
&-operation {
.Pdbi-operation-button { .button }
}
}
.Pdb-content {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
border-radius: 14px;
&-head {
.card-head
}
&-body {
margin-bottom: 8px;
.card-body
}
&-operation {
.Pdbc-button { .button }
}
&-user {
margin-top: 24px;
.Pdbc-user-who {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
.Pdbc-user-info {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 50px;
background: #F6F7FA;
border-radius: 14px;
span:first-child {
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
}
&-service {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
border-radius: 14px;
.Pdsc-service-head {
.card-head
}
.Pdsc-service-body {
.card-body
}
.Pdsc-service-question {
margin-top: 24px;
.card-head
}
.Pdsc-service-divider {
&:before {
height: 1px;
border-color: #EBEBEB;
}
}
}
}
}
}
\ No newline at end of file
src/views/Policy/Detail/index.vue 0 → 100644
View file @ be4aa655
<template>
<div class="policy-detail">
<div class="policy-detail-body">
<p class="Pdb-status">保障中</p>
<div class="Pdb-payment">
<span class="Pdb-payment-text">缴费记录</span>
<svg-icon class-name="Pdb-payment-svg" icon-class="payment-record" />
</div>
<div class="Pdb-insurance">
<p class="Pdb-insurance-name">国民保·百万医疗险</p>
<p class="Pdb-insurance-no">NO.XXXXXXXXXXXXXXXXXXXXXXXX<br />由XXXXXXXXX承保</p>
<div class="Pdb-insurance-operation">
<cr-button class="Pdbi-operation-button">已开通次年续保</cr-button>
<cr-button class="Pdbi-operation-button">申请理赔</cr-button>
</div>
</div>
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<span class="Pdbc-head-status">查看详情</span>
</div>
<div class="Pdb-content-body">
<div class="Pdbc-body-item">
<span>100种重大疾病医疗保险金（0免赔额）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>一般医疗保险金（1万免赔额）</span>
<span>300万</span>
</div>
<div class="Pdbc-body-item">
<span>质子重离子医疗保险金（60%赔付）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>意外身故</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外伤残</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外住院津贴</span>
<span>100元/天</span>
</div>
<div class="Pdbc-body-item">
<span>生效日期</span>
<span>2020.5.31</span>
</div>
<div class="Pdbc-body-item">
<span>终止日期</span>
<span>2021.5.31</span>
</div>
</div>
<div class="Pdb-content-operation">
<cr-button class="Pdbc-button">电子保单</cr-button>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">投保人</p>
<div class="Pdbc-user-info">
<span>王*闹</span>
<span>身份证号 1333**********3445</span>
</div>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">被保人</p>
<div class="Pdbc-user-info">
<span>王*闹</span>
<span>身份证号 1333**********3445</span>
</div>
</div>
</div>
<div class="Pdb-content-service">
<div class="Pdsc-service-head">
<span>增值服务</span>
<span>查看详情</span>
</div>
<div class="Pdsc-service-body">
<div>
<span>重疾快速就医</span>
</div>
<div>
<span>住院押金垫付</span>
</div>
</div>
<div class="Pdsc-service-question">
<span>常见问题</span>
<svg-icon icon-class="arrow" />
</div>
<cr-divider class="Pdsc-service-divider" :hairline="false" />
<div class="Pdsc-service-agreement">
<span>保险条款</span>
<span>健康告知</span>
<span>投保须知与声明</span>
<span>服务协议</span>
</div>
<insurance-recommend />
</div>
</div>
</div>
</template>
<script>
import "./index.less";
import point from "@/assets/images/policy/detail/point@2x.png";
import InsuranceRecommend from "../modules/InsuranceRecommend";
export default {
name: "PolicyList",
components: {
InsuranceRecommend
},
data() {
return {
point
};
}
};
</script>
src/views/Policy/index.less 0 → 100644
View file @ be4aa655
@import "../../style/var.less";
@import "../../style/mixins.less";
.policy {
background-color: @background-color;
&-tab {
width: 100% !important;
& > div {
width: 100% !important;
z-index: 100;
}
/deep/ .cr-tabbar {
background-color: #f5f5f5;
font-size: @font-size-16;
padding: @padding-lg+1 0;
&-item {
position: relative;
&::after {
position: absolute;
left: 0;
top: 26px;
// transition: width .2s linear;
content: " ";
display: block;
width: 0;
height: 4px;
background: @orange-light;
border-radius: @border-radius-lx;
}
&--active {
font-weight: 600;
&::after {
width: 32px;
}
}
}
}
}
&-item {
position: relative;
margin: 10px 16px;
padding: 20px 0 20px 20px;
background: #FFFFFF;
border-radius: 14px;
&-pro {
display: flex;
align-items: center;
margin-bottom: 8px;
&-name{
padding: 4px 0 2px 0;
margin-right: 6px;
font-size: 16px;
font-weight: 600;
color: #242629;
}
&-type{
padding: 3px 0 1px 0;
width: 52px;
border-radius: 8px 2px 8px 2px;
text-align: center;
font-size: 11px;
font-weight: 400;
&_illness {
background: #FFD8BF;
color: #FF6702;
}
&_life {
background: #F3F2F1;
color: #DDB984;
}
&_casualty {
background: #F6E8FF;
color: #858AFF;
}
&_medical {
background: #FFEAB7;
color: #EAAD1A;
}
}
&-status {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
&-recognizee, &-time {
margin-bottom: 8px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
&-operation {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
&-button {
margin: 9px 8px 0 0;
// margin: 9px 8px 11px 0;
padding: 0 !important;
width: 102px;
height: 28px;
border-radius: 8px;
border: 1px solid #787EFF;
font-size: 14px;
font-weight: 400;
color: #787EFF;
line-height: 16px;
&:last-child {
margin-right: 12px;
}
&_paid {
border: 0;
background: #F4F5FF;
color: #787EFF;
}
}
&-image {
position: absolute;
right: 0;
bottom: 0;
}
&-desc {
margin-top: 9px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
&_wait {
color: #999999;
}
&_result {
color: #F94C4C;
}
}
}
}
&-divider {
margin: 10px 130px 16px;
font-size: 11px;
font-weight: 400;
color: #CCCCCC;
line-height: 11px;
&:after {
margin-left: 0;
border: 1px solid #CCCCCC;
}
&:before {
margin-right: 0;
border: 1px solid #CCCCCC;
}
}
&-recommend {
position: relative;
margin: 0 16px 11px;
padding: 29px 23px 32px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
&-content {
display: flex;
margin-bottom: 18px;
width: 100%;
.Prc-left {
margin-right: 20px;
}
.Prc-right {
&-title {
margin: 1px 0 9px 0;
span:first-child {
font-size: 28px;
font-weight: 600;
color: #FF6702;
line-height: 40px;
}
span:last-child {
font-size: 28px;
font-weight: 600;
color: #242629;
line-height: 40px;
}
}
&-desc {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
}
&-button {
width: 296px;
height: 50px;
background: #FFC842;
border-radius: 14px;
z-index: 0;
&:after {
width: 296px;
height: 52px;
z-index: -1;
background: rgba(255,200,66,1);
border-radius: 14px;
opacity: 0.4;
filter: blur(10px);
position: absolute;
content: '';
left: 0;
top: 12px;
}
/deep/ .cr-button__text {
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
}
&-angle {
position: absolute;
top: -5px;
left: -5px;
}
}
&-none {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 16px;
height: 374px;
background: #FFFFFF;
border-radius:14px;
&-title {
margin: 14px 0 9px 0;
font-size: 16px;
font-weight: 600;
color: #999999;
}
&-desc {
font-size: 11px;
font-weight: 400;
color: #CCCCCC;
}
}
}
src/views/Policy/index.vue 0 → 100644
View file @ be4aa655
<template>
<div class="policy">
<cr-sticky class="policy-tab">
<cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
<cr-tabbar-item>全部</cr-tabbar-item>
<cr-tabbar-item>本人</cr-tabbar-item>
<cr-tabbar-item>父母</cr-tabbar-item>
<cr-tabbar-item>配偶</cr-tabbar-item>
<cr-tabbar-item>子女</cr-tabbar-item>
</cr-tabbar>
</cr-sticky>
<!-- <policy-item></policy-item>
<cr-divider class="policy-divider">我是有底线的</cr-divider>
<insurance-recommend></insurance-recommend> -->
<div class="policy-none">
<cr-image round width="143px" height="143px" :src="policyDefault" />
<p class="policy-none-title">暂无保单</p>
<p class="policy-none-desc">赶紧去看看有哪些精品保险吧</p>
</div>
</div>
</template>
<script>
import "./index.less";
import policyDefault from "@/assets/images/policy/policy-default@2x.png";
import InsuranceRecommend from "./modules/InsuranceRecommend";
import PolicyItem from "./modules/PolicyItem";
export default {
name: "PolicyList",
components: {
InsuranceRecommend,
PolicyItem,
},
data() {
return {
active: 0,
policyDefault,
};
}
};
</script>
src/views/Policy/modules/InsuranceRecommend.vue 0 → 100644
View file @ be4aa655
<template>
<div class="policy-recommend">
<div class="policy-recommend-content">
<cr-image class="Prc-left" width="72px" height="72px" :src="recommendContent" />
<div class="Prc-right">
<p class="Prc-right-title">
<span>50万</span>
<span>重疾保障</span>
</p>
<p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p>
</div>
</div>
<cr-button class="policy-recommend-button">点此投保</cr-button>
<cr-image class="policy-recommend-angle" width="65px" height="65px" :src="recommendAngle" />
</div>
</template>
<script>
import "../index.less";
import recommendAngle from "@/assets/images/policy/recommend-angle@2x.png";
import recommendContent from "@/assets/images/policy/recommend-content@2x.png";
export default {
name: "InsuranceRecommend",
data() {
return {
recommendAngle,
recommendContent
};
}
};
</script>
src/views/Policy/modules/PolicyItem.vue 0 → 100644
View file @ be4aa655
<template>
<div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">为家人投保</cr-button>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
</div>
<cr-image
class="policy-item-operation-image"
width="63px"
height="63px"
fit="cover"
:src="guarantee"
/>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万意外险</p>
<p class="policy-item-pro-type policy-item-pro-type_casualty">意外保障</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button policy-item-operation-button_paid"
>开启自动续费</cr-button
>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_result">
有XX.X元扣费失败，请立即开通自动续费
</p>
</div>
<cr-image
class="policy-item-operation-image"
width="63px"
height="63px"
fit="cover"
:src="guarantee"
/>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
<p class="policy-item-pro-status">待生效</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">为家人投保</cr-button>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_illness">重疾保障</p>
<p class="policy-item-pro-status">待支付</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button policy-item-operation-button_paid"
>去支付</cr-button
>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">退款中</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">联系客服</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_result">
退保退款中，请注意查收
</p>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">出单中</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">联系客服</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_wait">
正在出单，请耐心等待…
</p>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">投保失败</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<p class="policy-item-operation-desc policy-item-operation-desc_result">
很抱歉，被保人的核保未通过
</p>
</div>
</div>
</div>
</template>
<script>
import "../index.less";
import guarantee from "@/assets/images/policy/guarantee@2x.png";
export default {
name: "InsuranceRecommend",
data() {
return {
guarantee
};
}
};
</script>
src/views/User/index.less
View file @ be4aa655
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.user { .user {
overflow: hidden; overflow: hidden;
background-color: #F4F4F4; background-color: @user-background-color;
&-info { &-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
line-height: 40px; line-height: 40px;
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
color: rgba(51,51,51,1); color: @black;
} }
span:nth-child(2) { span:nth-child(2) {
width: 63px; width: 63px;
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
background: #000000; background: #000000;
border-radius: 8px; border-radius: 8px;
opacity: 0.2; opacity: 0.2;
font-size: 12px; font-size: @font-size-12;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: @user-module-background-color;
} }
} }
&-image { &-image {
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
padding: 0 32px; padding: 0 32px;
height: 69px; height: 69px;
line-height: 69px; line-height: 69px;
background: #FFC842; background: @orange-light;
border-radius: 14px; border-radius: @border-radius-md;
&-list { &-list {
display: flex; display: flex;
height: 27px; height: 27px;
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
height: 27px; height: 27px;
line-height: 27px; line-height: 27px;
width: 27px; width: 27px;
font-size: 0;
&-svg { &-svg {
width: 27px; width: 27px;
height: 27px; height: 27px;
...@@ -76,13 +77,13 @@ ...@@ -76,13 +77,13 @@
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 100%; border-radius: 100%;
background-color: #F94C4C; background-color: @red;
} }
} }
&-title { &-title {
font-size:16px; font-size: 16px;
font-weight:600; font-weight: 600;
color:rgba(0,0,0,1); color: #000000;
} }
} }
&-divider { &-divider {
...@@ -93,12 +94,12 @@ ...@@ -93,12 +94,12 @@
&-family { &-family {
margin: 0 16px 10px; margin: 0 16px 10px;
padding: 20px 20px 0 20px; padding: 20px 20px 0 20px;
border-radius: 14px; border-radius: @border-radius-md;
background: #FFFFFF; background: @user-module-background-color;
&-title { &-title {
margin: 0; margin: 0;
font-weight:600; font-weight:600;
font-size:19px; font-size: 19px;
color: #242629; color: #242629;
text-align: left; text-align: left;
} }
...@@ -121,14 +122,14 @@ ...@@ -121,14 +122,14 @@
margin: 8px 0 6px; margin: 8px 0 6px;
width: 40px; width: 40px;
text-align: center; text-align: center;
font-size: 12px; font-size: @font-size-12;
font-weight: 600; font-weight: 600;
color: #333333; color: @black;
} }
&-divider { &-divider {
width: 40px; width: 40px;
height: 4px; height: 4px;
background: #FFC842; background: @orange-light;
border-radius: 3px; border-radius: 3px;
} }
&_fixed { &_fixed {
...@@ -139,14 +140,13 @@ ...@@ -139,14 +140,13 @@
} }
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none;
} }
} }
&-insurance { &-insurance {
&-item { &-item {
display: flex; display: flex;
align-items: center; align-items: center;
// width: 275px;
height: 76px; height: 76px;
&-middle { &-middle {
display: flex; display: flex;
...@@ -156,13 +156,13 @@ ...@@ -156,13 +156,13 @@
margin: 0 10px 0 8px; margin: 0 10px 0 8px;
padding: 3px 0; padding: 3px 0;
width: 169px; width: 169px;
height: 44px;
.Ufii-middle-main { .Ufii-middle-main {
margin-bottom: 6px;
font-size: 0; font-size: 0;
text-align: left; text-align: left;
&-title { &-title {
margin-right: 8px; margin-right: 8px;
font-size: 16px; font-size: @font-size-16;
font-weight: 600; font-weight: 600;
color: #242629; color: #242629;
} }
...@@ -172,18 +172,19 @@ ...@@ -172,18 +172,19 @@
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
background: #FFEAB7; background: @tag-warning-light-background-color;
border-radius: 8px 2px 8px 2px; border-radius: 8px 2px 8px 2px;
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
color: #EAAD1A; color: @tag-warning-light-color;
} }
} }
.Ufii-middle-footer { .Ufii-middle-footer {
text-align: left; text-align: left;
font-size: 12px; font-size: @font-size-12;
font-weight: 400; font-weight: 400;
color: #999999; color: @gray-4;
line-height: 16px;
} }
&_enable { &_enable {
width: auto; width: auto;
...@@ -194,11 +195,11 @@ ...@@ -194,11 +195,11 @@
padding: 6px 0; padding: 6px 0;
line-height: normal; line-height: normal;
text-align: center; text-align: center;
background: #FFC842; background: @orange-light;
border-radius: 8px; border-radius: @border-radius-sm;
font-size: 12px; font-size: @font-size-12;
font-weight: 600; font-weight: 600;
color: #333333; color: @black;
} }
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
...@@ -209,8 +210,8 @@ ...@@ -209,8 +210,8 @@
&-service { &-service {
margin: 0 16px 14px; margin: 0 16px 14px;
padding: 20px 20px 0 20px; padding: 20px 20px 0 20px;
background-color: #FFFFFF; background-color: @user-module-background-color;
border-radius: 14px; border-radius: @border-radius-md;
&-title { &-title {
margin-bottom: 3px; margin-bottom: 3px;
text-align: left; text-align: left;
...@@ -227,6 +228,7 @@ ...@@ -227,6 +228,7 @@
/deep/ .cr-cell__left-icon { /deep/ .cr-cell__left-icon {
margin-right: 12px; margin-right: 12px;
height: auto; height: auto;
line-height: normal;
.cr-icon__image { .cr-icon__image {
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -234,9 +236,12 @@ ...@@ -234,9 +236,12 @@
} }
/deep/ .cr-cell__title { /deep/ .cr-cell__title {
flex: 0 1 auto; flex: 0 1 auto;
font-size:16px; font-size: @font-size-16;
font-weight:400; font-weight: 400;
color:rgba(51,51,51,1); color: @black;
.cr-cell__label {
display: none;
}
} }
&-svg { &-svg {
width: 16px; width: 16px;
...@@ -254,7 +259,7 @@ ...@@ -254,7 +259,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0 130px 33.92px; margin: 0 130px 82.92px;
font-size: 0; font-size: 0;
&-svg { &-svg {
margin-bottom: 3.08px; margin-bottom: 3.08px;
...@@ -267,11 +272,32 @@ ...@@ -267,11 +272,32 @@
padding: 1px 0; padding: 1px 0;
line-height: normal; line-height: normal;
text-align: center; text-align: center;
background: #FFFFFF; background: @user-module-background-color;
border-radius: 14px; border-radius: @border-radius-md;
font-size: 11px; font-size: @font-size-11;
font-weight: 400; font-weight: 400;
color: #CCCCCC; color: #CCCCCC;
} }
} }
} &-mask {
\ No newline at end of file display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&-image {
margin-bottom: 10px;
}
&-title {
font-size: 15px;
line-height:24px;
font-weight: 600;
color: #FFFFFF;
}
&-desc {
font-size: 20px;
line-height:24px;
font-weight: 600;
color: #FFFFFF;
}
}
}
src/views/User/index.vue
View file @ be4aa655
<template> <template>
<div class="user"> <div class="user">
<div class="user-info"> <div class="user-info">
<div class="user-info-account"> <div class="user-info-account" @click="go('', true)">
<span>未登录</span> <span>未登录</span>
<span>点击登录</span> <span>点击登录</span>
</div> </div>
<div class="user-info-image"> <div class="user-info-image" @click="go('', true)">
<cr-image round width="60px" height="60px" fit="cover" :src="avatar" /> <cr-image round width="60px" height="60px" fit="cover" :src="avatar" />
<!-- <svg-icon icon-class="certification" class-name="user-info-image-certification" /> --> <!-- <svg-icon icon-class="certification" class-name="user-info-image-certification" /> -->
</div> </div>
</div> </div>
<div class="user-insurance"> <div class="user-insurance">
<div class="user-insurance-list"> <div class="user-insurance-list" @click="go('/policy')">
<div class="user-insurance-list-icon"> <div class="user-insurance-list-icon">
<svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" /> <svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" />
<div class="user-insurance-list-icon-dot"></div> <div class="user-insurance-list-icon-dot"></div>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<span class="user-insurance-list-title">全部保单</span> <span class="user-insurance-list-title">全部保单</span>
</div> </div>
<div class="user-insurance-divider"></div> <div class="user-insurance-divider"></div>
<div class="user-insurance-list"> <div class="user-insurance-list" @click="go('', true)">
<div class="user-insurance-list-icon"> <div class="user-insurance-list-icon">
<svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" /> <svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
<!-- <div class="user-insurance-list-icon-dot"></div> --> <!-- <div class="user-insurance-list-icon-dot"></div> -->
...@@ -27,76 +27,10 @@ ...@@ -27,76 +27,10 @@
<span class="user-insurance-list-title">申请理赔</span> <span class="user-insurance-list-title">申请理赔</span>
</div> </div>
</div> </div>
<div class="user-family"> <user-family @go="go"></user-family>
<p class="user-family-title">家庭配置保障</p>
<div class="user-family-info">
<!-- <div class="user-family-info-item">
<cr-image
round
width="40px"
height="40px"
fit="cover"
src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
/>
<span class="user-family-info-item-name">王斌</span>
<div class="user-family-info-item-divider"></div>
</div>-->
<div class="user-family-info-item" :class="{ 'user-family-info-item_fixed': isFixed }">
<svg-icon icon-class="add-family" class-name="user-family-info-item-svg" />
<span class="user-family-info-item-name">添加</span>
</div>
</div>
<div class="user-family-insurance">
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="medical" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万医疗险</span>
<!-- <span class="status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">优势介绍 | 优势介绍 | 优势介绍</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="casualty" />
<!-- user-family-insurance-item-middle_enable 保障中 -->
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万意外险</span>
<!-- <span class="Ufii-middle-main-status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">优势介绍 | 优势介绍 | 优势介绍</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万寿险</span>
<!-- <span class="status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">优势介绍 | 优势介绍 | 优势介绍</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万重疾险</span>
<!-- <span class="status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">优势介绍 | 优势介绍 | 优势介绍</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
</div>
</div>
<div class="user-service"> <div class="user-service">
<p class="user-service-title">我的服务</p> <p class="user-service-title">我的服务</p>
<div class="user-service-main"> <div class="user-service-main" @click="go('', true)">
<cr-cell title="帮助中心" :icon="help" class="user-service-main-item"> <cr-cell title="帮助中心" :icon="help" class="user-service-main-item">
<svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" /> <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
</cr-cell> </cr-cell>
...@@ -107,53 +41,56 @@ ...@@ -107,53 +41,56 @@
</div> </div>
<div class="user-logo"> <div class="user-logo">
<svg-icon icon-class="logo" class-name="user-logo-svg" /> <svg-icon icon-class="logo" class-name="user-logo-svg" />
<p class="user-logo-desc">了解芒果保险</p> <p class="user-logo-desc" @click="go('/introduction')">了解芒果保险</p>
</div> </div>
<cr-overlay class="user-mask" :show="show" @click="show = false">
<cr-image
class="user-mask-image"
round
width="86px"
height="86px"
fit="cover"
:src="record"
/>
<p class="user-mask-title">平台备案中</p>
<p class="user-mask-desc">敬请期待</p>
</cr-overlay>
<tabbar></tabbar>
</div> </div>
</template> </template>
<script> <script>
import "./index.less"; import "./index.less";
import medical from "@/assets/images/user/medical_closed@2x.png";
import casualty from "@/assets/images/user/casualty_closed@2x.png";
import illness from "@/assets/images/user/illness_closed@2x.png";
import life from "@/assets/images/user/life_closed@2x.png";
import customerService from "@/assets/images/user/customer-service@1x.png"; import customerService from "@/assets/images/user/customer-service@1x.png";
import help from "@/assets/images/user/help@2x.png"; import help from "@/assets/images/user/help@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png"; import avatar from "@/assets/images/user/avatar@2x.png";
import record from "@/assets/images/user/for_the_record@2x.png";
import UserFamily from "./modules/UserFamily";
import Tabbar from "@/components/Tabbar";
export default { export default {
name: "User",
components: {
UserFamily,
Tabbar
},
data() { data() {
return { return {
medical,
casualty,
illness,
life,
avatar, avatar,
customerService, customerService,
help, help,
isFixed: false record,
isFixed: false,
show: false
}; };
}, },
methods: { methods: {
// scrollEvent() { go(path, isOverlay = false) {
// this.$nextTick(() => { if (isOverlay) {
// const offsetWidth = document.querySelector('.user-family-info').offsetWidth; this.show = true;
// const scrollWidth = document.querySelector('.user-family-info').scrollWidth; } else {
// this.isShow = scrollWidth > offsetWidth; this.$router.push(path);
// }); }
// } }
},
mounted() {
this.$nextTick(() => {
const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
this.isFixed = scrollWidth > offsetWidth;
console.log(scrollWidth, offsetWidth, this.isFixed);
});
// window.addEventListener("scroll", this.scrollEvent);
// this.$once("hook:beforeDestroy", () => {
// window.removeEventListener("scroll", this.scrollEvent);
// });
} }
}; };
</script> </script>
src/views/User/modules/UserFamily.vue 0 → 100644
View file @ be4aa655
<template>
<div class="user-family">
<p class="user-family-title">家庭配置保障</p>
<div class="user-family-info">
<!-- <div class="user-family-info-item">
<cr-image
round
width="40px"
height="40px"
fit="cover"
src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
/>
<span class="user-family-info-item-name">王斌</span>
<div class="user-family-info-item-divider"></div>
</div>-->
<div
class="user-family-info-item"
:class="{ 'user-family-info-item_fixed': isFixed }"
@click="go"
>
<svg-icon icon-class="add-family" class-name="user-family-info-item-svg" />
<span class="user-family-info-item-name">添加</span>
</div>
</div>
<div class="user-family-insurance" @click="go">
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="medical" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万医疗险</span>
<!-- <span class="status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">看病报销医药费,最高600万</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="casualty" />
<!-- user-family-insurance-item-middle_enable 保障中 -->
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万意外险</span>
<!-- <span class="Ufii-middle-main-status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">意外风险覆盖全,最高100万保额</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万寿险</span>
<!-- <span class="status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">最高350万保额,顶梁柱必备</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
<div class="user-family-insurance-item">
<cr-image round width="44px" height="44px" :src="illness" />
<div class="user-family-insurance-item-middle">
<div class="Ufii-middle-main">
<span class="Ufii-middle-main-title">国民保·百万重疾险</span>
<!-- <span class="status">保障中</span> -->
</div>
<div class="Ufii-middle-footer">100种重症+40种轻症</div>
</div>
<p class="user-family-insurance-item-left">开启保障</p>
</div>
</div>
</div>
</template>
<script>
import "../index.less";
import medical from "@/assets/images/user/medical_closed@2x.png";
import casualty from "@/assets/images/user/casualty_closed@2x.png";
import illness from "@/assets/images/user/illness_closed@2x.png";
import life from "@/assets/images/user/life_closed@2x.png";
export default {
data() {
return {
medical,
casualty,
illness,
life,
isFixed: false
};
},
methods: {
go() {
this.$emit("go", "", true);
}
},
mounted() {
this.$nextTick(() => {
const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
this.isFixed = scrollWidth > offsetWidth;
console.log(scrollWidth, offsetWidth, this.isFixed);
});
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment