Skip to content

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

添加 - 我的 页面

parent fa1ab9ec
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 14958 additions and 140 deletions
package-lock.json 0 → 100644
View file @ ae3bd3ce
This diff is collapsed.
package.json
View file @ ae3bd3ce
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve --open",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"release": "vue-cli-service build", "release": "vue-cli-service build",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
......
public/index.html
View file @ ae3bd3ce
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<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>
<script crossorigin="anonymous" integrity="sha384-OZmxTjkv7EQo5XDMPAmIkkvywVeXw59YyYh6zq8UKfkbor13jS+5p8qMTBSA1q+F" src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/assets/icons/svg/add-family.svg 0 → 100644
View file @ ae3bd3ce
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" 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(-36.000000, -262.000000)">
<g id="Group-7" transform="translate(36.000000, 262.000000)">
<g id="Group-6">
<g id="Group-25">
<circle id="Oval-Copy-4" fill="#FFF0CB" fill-rule="nonzero" cx="20" cy="20" r="20"></circle>
<g id="Group-26" transform="translate(12.000000, 12.000000)" fill="#FF6702" fill-rule="nonzero">
<rect id="Rectangle" x="0" y="7" width="16" height="2" rx="1"></rect>
<rect id="Rectangle" transform="translate(8.000000, 8.000000) rotate(90.000000) translate(-8.000000, -8.000000) " x="0" y="7" width="16" height="2" rx="1"></rect>
</g>
<g id="Group-5" transform="translate(12.000000, 12.000000)"></g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/all-insurance-policy.svg 0 → 100644
View file @ ae3bd3ce
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="27px" viewBox="0 0 27 27" 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 2</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="我的-未登录" transform="translate(-48.000000, -140.000000)">
<g id="Group-2" transform="translate(48.000000, 140.000000)">
<g id="Group-16">
<rect id="Rectangle" opacity="0.1" fill-rule="nonzero" x="0" y="0" width="27" height="27" rx="8"></rect>
<g id="Group-15" transform="translate(6.000000, 4.000000)">
<g id="Group-12" fill="#333333">
<rect id="Rectangle" x="0" y="1" width="15" height="17" rx="3"></rect>
<rect id="Rectangle" stroke="#FFC842" stroke-linecap="round" stroke-linejoin="round" x="3.5" y="-0.5" width="8" height="3" rx="1.5"></rect>
</g>
<rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" x="4" y="7" width="7" height="1" rx="0.5"></rect>
<rect id="Rectangle-Copy-5" fill="#FFFFFF" fill-rule="nonzero" x="4" y="11" width="7" height="1" rx="0.5"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/arrow.svg 0 → 100644
View file @ ae3bd3ce
<?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>我的-未登录</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="我的-未登录" transform="translate(-324.000000, -754.000000)">
<g id="Group-30" transform="translate(324.000000, 754.000000)">
<g id="右向箭头">
<g id="Group-14" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) ">
<rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="16" height="16"></rect>
<path d="M8.70710678,5.70710678 L13.2928932,10.2928932 C13.6834175,10.6834175 13.6834175,11.3165825 13.2928932,11.7071068 C13.1053568,11.8946432 12.8510029,12 12.5857864,12 L3.41421356,12 C2.86192881,12 2.41421356,11.5522847 2.41421356,11 C2.41421356,10.7347835 2.5195704,10.4804296 2.70710678,10.2928932 L7.29289322,5.70710678 C7.68341751,5.31658249 8.31658249,5.31658249 8.70710678,5.70710678 Z" id="Triangle" fill="#EEEEEE" fill-rule="nonzero" transform="translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/certification.svg 0 → 100644
View file @ ae3bd3ce
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" 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(-329.000000, -71.000000)">
<g id="Group-23" transform="translate(329.000000, 71.000000)">
<g id="Group">
<g id="编组-3" transform="translate(0.000000, 0.000000)">
<g id="编组-2备份" fill="#FFC842" fill-rule="nonzero" stroke="#FFFFFF">
<rect id="矩形-copy备份" x="0.5" y="0.5" width="19" height="19" rx="9.5"></rect>
</g>
<g id="v" transform="translate(6.000000, 6.000000)"></g>
</g>
<polygon id="路径" fill="#000000" fill-rule="nonzero" points="8.03035182 14 6.64573643 6.668 6 6.668 6 6.004 8.57907128 6.004 9.27137897 9.856 11.7751938 6 15 6.0032 9.96368667 13.9999969"></polygon>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/claims-apply.svg 0 → 100644
View file @ ae3bd3ce
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="27px" viewBox="0 0 27 27" 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 2</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="我的-未登录" transform="translate(-228.000000, -140.000000)">
<g id="Group-3" transform="translate(228.000000, 140.000000)">
<g id="Group-9">
<g id="Group-11">
<rect id="Rectangle-Copy" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="27" height="27" rx="8"></rect>
<g id="Group-8" transform="translate(5.000000, 4.000000)">
<g id="盾牌" fill="#333333">
<path d="M0,2.96129676 C7.49191124,2.96129676 8.6615961,0 8.6615961,0 C8.6615961,0 9.80690735,2.96129676 17.3258892,2.96129676 L17.3258892,13.3983551 C17.3258892,18.1945383 8.6615961,20 8.6615961,20 C8.6615961,20 0,18.1945383 0,13.3983551 L0,2.96129676 Z" id="Path"></path>
</g>
<path d="M11.1034462,10.7741548 C11.4095999,10.7741548 11.6597488,11.0342089 11.6597488,11.3524682 C11.6597488,11.6707417 11.4095999,11.9307816 11.1034462,11.9307816 L9.38549326,11.9307816 L9.38549326,13.4216866 C9.38549326,13.7399459 9.13533076,14 8.82917704,14 C8.52225355,13.9991954 8.27363474,13.7407461 8.27286084,13.4216866 L8.27286084,11.9307816 L6.55630255,11.9307816 C6.2493845,11.9299691 6.0007739,11.671522 6,11.3524682 C6,11.0342089 6.25014883,10.7741548 6.55630255,10.7741548 L8.27425549,10.7741548 L8.27425549,9.91978256 L6.55630255,9.91978256 C6.2493845,9.9189701 6.0007739,9.66052298 6,9.34146914 C6,9.02320985 6.25014882,8.76268667 6.55630255,8.76268667 L7.79074837,8.76268667 L6.29729357,6.95204417 C6.09940322,6.70944874 6.12647864,6.34641057 6.35797466,6.1384227 C6.59115381,5.93155915 6.94137174,5.95976911 7.14111342,6.20150319 L8.83058536,8.24790858 L10.520071,6.20150319 C10.720309,5.96078824 11.0696915,5.93264508 11.3032098,6.13842272 C11.5346948,6.34558761 11.5617675,6.71092273 11.3638772,6.95204419 L9.87039502,8.76267248 L11.1053057,8.76267248 C11.4114731,8.76267248 11.661622,9.02320988 11.661622,9.34146917 C11.661622,9.65925941 11.4114731,9.91978259 11.1053057,9.91978259 L9.38549325,9.91978259 L9.38549325,10.7736715 L11.1034462,10.7736715 L11.1034462,10.7741548 Z" id="Path" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/customer-service.svg 0 → 100644
View file @ ae3bd3ce
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" 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>我的-未登录</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="我的-未登录" transform="translate(-36.000000, -808.000000)" fill-rule="nonzero">
<g id="Group-13-Copy-3" transform="translate(36.000000, 808.000000)">
<g id="Group-17">
<g id="Group-18">
<path d="M6,0 L16,0 C18.209139,-4.05812251e-16 20,1.790861 20,4 L20,14 C20,17.3137085 17.3137085,20 14,20 L4,20 C1.790861,20 2.705415e-16,18.209139 0,16 L0,6 C-4.05812251e-16,2.6862915 2.6862915,6.08718376e-16 6,0 Z" id="矩形备份-copy-9" fill="#FFC842" transform="translate(10.000000, 10.000000) scale(1, -1) translate(-10.000000, -10.000000) "></path>
<path d="M10.7998555,11.9700621 L11.1142702,11.7975671 C11.2371026,11.7317357 11.3388523,11.6825704 11.4396853,11.642572 C12.1537629,11.3550798 12.7825922,11.5584078 13.6139963,12.4175502 C14.1291601,12.9492014 14.2813248,13.4216878 14.0824094,13.8425091 C13.9348271,14.1558331 13.649745,14.3724934 13.1419159,14.6408201 C13.1089161,14.6574863 12.8165008,14.8074823 12.7413361,14.8491471 C11.5597606,15.493295 8.85193934,14.018338 6.90405055,11.4967437 C4.95156951,8.96931658 4.44556766,6.27438937 5.64272618,5.62025296 L5.80130844,5.5319222 L5.97272356,5.43359169 C6.57771988,5.08693468 6.96546718,4.94860615 7.42471345,5.01693768 C7.88395972,5.08693571 8.27445754,5.3869275 8.60445524,5.93357825 C9.30111777,7.0902119 9.14711777,7.63853399 8.25154139,8.13684482 C8.1873752,8.17351042 7.95821081,8.29517376 7.93712673,8.30767291 C7.7171288,8.42766945 8.08929241,9.23264673 8.95370334,10.3509539 C9.82819726,11.4817543 10.5596916,12.1009083 10.7989351,11.9700722 L10.7998555,11.9700621 Z" id="Path" fill="#333333"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/help.svg 0 → 100644
View file @ ae3bd3ce
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" 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>我的-未登录</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="我的-未登录" transform="translate(-36.000000, -751.000000)" fill-rule="nonzero">
<g id="Group-13-Copy-2" transform="translate(36.000000, 751.000000)">
<g id="Group-17">
<path d="M6,0 L16,0 C18.209139,-4.05812251e-16 20,1.790861 20,4 L20,14 C20,17.3137085 17.3137085,20 14,20 L4,20 C1.790861,20 2.705415e-16,18.209139 0,16 L0,6 C-4.05812251e-16,2.6862915 2.6862915,6.08718376e-16 6,0 Z" id="矩形备份-copy-9" fill="#FFC842" transform="translate(10.000000, 10.000000) scale(1, -1) translate(-10.000000, -10.000000) "></path>
<g id="Group-13" transform="translate(7.000000, 5.000000)" fill="#333333">
<path d="M2.11365337,9.26672 C2.11365337,8.67097099 2.58699332,8.18947399 3.17050677,8.18947399 C3.75402022,8.18947399 4.22734236,8.67097099 4.22734236,9.26672 C4.22734236,9.86246901 3.75400241,10.343966 3.17048896,10.343966 C2.58699332,10.343966 2.11365337,9.86042084 2.11365337,9.26672 Z M5.60244506,4.29468248 C5.40250849,4.49666721 5.0413902,4.8373929 4.52113835,5.31481138 C4.37830107,5.449456 4.26201869,5.56778653 4.17633414,5.66980298 C4.09064958,5.77181943 4.02535762,5.86566104 3.98250644,5.94931524 C3.93967306,6.03296944 3.90702709,6.118654 3.88458632,6.20435637 C3.86214555,6.29002312 3.82745141,6.43896927 3.7805217,6.65115922 C3.70096383,7.10407095 3.44797086,7.32851427 3.02563914,7.32851427 C2.80530996,7.32851427 2.62168747,7.25506527 2.47071095,7.10611911 C2.31973444,6.95719077 2.24628545,6.73887413 2.24628545,6.44714413 C2.24628545,6.0819295 2.30137219,5.76569275 2.41154569,5.49841606 C2.52171918,5.23115717 2.66656901,4.99652646 2.84814333,4.79455953 C3.02973547,4.59255698 3.27455358,4.35179958 3.58263329,4.0743533 C3.8539707,3.83156554 4.04779839,3.64794305 4.16817709,3.52348583 C4.28853799,3.39902861 4.39055444,3.26233582 4.47216048,3.10931114 C4.55378432,2.95630428 4.5966177,2.7930922 4.5966177,2.61354823 C4.5966177,2.26671367 4.47013012,1.97291768 4.21918532,1.73420845 C3.96824052,1.49549921 3.64382892,1.37512051 3.24598612,1.37512051 C2.78082102,1.37512051 2.43806498,1.49551702 2.21976615,1.7362388 C1.99941917,1.9769962 1.81374851,2.33198781 1.662772,2.80124924 C1.51995253,3.29293363 1.24656696,3.53776956 0.844645644,3.53776956 C0.607984573,3.53776956 0.408030189,3.452085 0.244818113,3.28069807 C0.0816060378,3.10931114 0,2.9236583 0,2.72372172 C0,2.31159521 0.128517933,1.893342 0.385589419,1.46897992 C0.642660905,1.04461784 1.02011109,0.69370475 1.51384365,0.41622285 C2.00757621,0.13874095 2.58494516,-5.68434189e-14 3.24395577,-5.68434189e-14 C3.85601886,-5.68434189e-14 4.39871148,0.11630018 4.86592475,0.348900541 C5.33518618,0.581483091 5.69833483,0.897719845 5.95337596,1.29759299 C6.20839928,1.69748395 6.33693502,2.13205124 6.33693502,2.60129486 C6.34101354,2.970588 6.26961271,3.2949818 6.12271472,3.57449405 C5.97581673,3.85197595 5.80444761,4.09271555 5.60244506,4.29468248 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/logo.svg 0 → 100644
View file @ ae3bd3ce
This diff is collapsed.
src/main.js
View file @ ae3bd3ce
...@@ -6,6 +6,7 @@ import "./style/index.less"; ...@@ -6,6 +6,7 @@ import "./style/index.less";
import "amfe-flexible"; import "amfe-flexible";
import vConsole from "vconsole"; import vConsole from "vconsole";
import "@/assets/icons/index"; import "@/assets/icons/index";
import "@/service/load";
import "@/service/cherry-ui"; import "@/service/cherry-ui";
Vue.config.productionTip = false; Vue.config.productionTip = false;
......
src/router/index.js
View file @ ae3bd3ce
...@@ -8,7 +8,7 @@ const routes = [ ...@@ -8,7 +8,7 @@ const routes = [
{ {
path: "/", path: "/",
name: "Home", name: "Home",
component: Home redirect: "/goods"
}, },
{ {
path: "/about", path: "/about",
...@@ -37,6 +37,11 @@ const routes = [ ...@@ -37,6 +37,11 @@ const routes = [
path: "/goods/inform", path: "/goods/inform",
name: "GoodsInform", name: "GoodsInform",
component: () => import(/* webpackChunkName: "GoodsInform" */ "../views/Goods/inform.vue") component: () => import(/* webpackChunkName: "GoodsInform" */ "../views/Goods/inform.vue")
},
{
path: "/user",
name: "User",
component: () => import("../views/User/index.vue")
} }
]; ];
......
src/service/cherry-ui.js
View file @ ae3bd3ce
...@@ -6,7 +6,7 @@ import "@qg/cherry-ui/dist/cherry.css"; ...@@ -6,7 +6,7 @@ import "@qg/cherry-ui/dist/cherry.css";
const { const {
Button, Button,
Image, Image,
// Icon, Icon,
Cell, Cell,
CellGroup, CellGroup,
Row, Row,
...@@ -63,4 +63,5 @@ Vue.use(Switch); ...@@ -63,4 +63,5 @@ Vue.use(Switch);
Vue.use(Tag); Vue.use(Tag);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
Vue.use(Icon);
Vue.use(Sticky); Vue.use(Sticky);
src/service/load.js 0 → 100644
View file @ ae3bd3ce
/* eslint-disable */
import Vue from 'vue';
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory
: (global = global || self, global.Vue = factory)
console.log(global, factory, global || self)
})(this, Vue)
export default () => {}
\ No newline at end of file
src/style/reset.less
View file @ ae3bd3ce
...@@ -2,134 +2,133 @@ ...@@ -2,134 +2,133 @@
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com * http://cssreset.com
*/ */
html, html,
body, body,
div, div,
span, span,
applet, applet,
object, object,
iframe, iframe,
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6, h6,
p, p,
blockquote, blockquote,
pre, pre,
a, a,
abbr, abbr,
acronym, acronym,
address, address,
big, big,
cite, cite,
code, code,
del, del,
dfn, dfn,
em, em,
img, img,
ins, ins,
kbd, kbd,
q, q,
s, s,
samp, samp,
small, small,
strike, strike,
strong, strong,
sub, sub,
sup, sup,
tt, tt,
var, var,
b, b,
u, u,
i, i,
center, center,
dl, dl,
dt, dt,
dd, dd,
ol, ol,
ul, ul,
li, li,
fieldset, fieldset,
form, form,
label, label,
legend, legend,
table, table,
caption, caption,
tbody, tbody,
tfoot, tfoot,
thead, thead,
tr, tr,
th, th,
td, td,
article, article,
aside, aside,
canvas, canvas,
details, details,
embed, embed,
figure, figure,
figcaption, figcaption,
footer, footer,
header, header,
menu, menu,
nav, nav,
output, output,
ruby, ruby,
section, section,
summary, summary,
time, time,
mark, mark,
audio, audio,
video, video,
input { input {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font-weight: normal; font-weight: normal;
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, article,
aside, aside,
details, details,
figcaption, figcaption,
figure, figure,
footer, footer,
header, header,
menu, menu,
nav, nav,
section { section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
blockquote, blockquote,
q { q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:before,
blockquote:after, blockquote:after,
q:before, q:before,
q:after { q:after {
content: none; content: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
/* custom */ /* custom */
a { a {
color: #7e8c8d; color: #7e8c8d;
text-decoration: none; text-decoration: none;
} }
li { li {
list-style: none; list-style: none;
} }
body { body {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
} }
\ No newline at end of file
src/views/User/index.less 0 → 100644
View file @ ae3bd3ce
@import "../../style/index.less";
.user {
overflow: hidden;
background-color: #F4F4F4;
&-info {
display: flex;
justify-content: space-between;
margin: 31px 26px 28px 28px;
height: 60px;
&-account {
display: flex;
flex-direction: column;
span:nth-child(1) {
width: 84px;
height: 40px;
line-height: 40px;
font-size: 28px;
font-weight: 600;
color: rgba(51,51,51,1);
}
span:nth-child(2) {
width:63px;
height:20px;
line-height: 20px;
text-align: center;
background: #000000;
border-radius: 8px;
opacity: 0.2;
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
}
&-image {
position: relative;
width: 60px;
height: 60px;
&-certification {
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
}
}
}
&-insurance {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 16px 10px;
padding: 0 32px;
height: 69px;
line-height: 69px;
background: #FFC842;
border-radius: 14px;
&-list {
display: flex;
height: 27px;
line-height: 27px;
&-icon {
position: relative;
margin-right: 8px;
height: 27px;
line-height: 27px;
width: 27px;
&-svg {
width: 27px;
height: 27px;
}
&-dot {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 6px;
border-radius: 100%;
background-color: #F94C4C;
}
}
&-title {
font-size:16px;
font-weight:600;
color:rgba(0,0,0,1);
}
}
&-divider {
height: 19px;
border-left: solid 1px #010101;
}
}
&-family {
margin: 0 16px 10px;
padding: 20px 20px 0 20px;
border-radius: 14px;
background: #FFFFFF;
&-title {
margin: 0;
font-weight:600;
font-size:19px;
color: #242629;
text-align: left;
}
&-info {
overflow-x: auto;
display: flex;
margin: 20px 0 24px;
&-item {
font-size: 0; // 去掉默认间距
width: 40px;
&:not(:first-child) {
margin-left: 25px;
}
&-svg {
width: 40px;
height: 40px;
}
&-name {
display: inline-block;
margin: 8px 0 6px;
width: 40px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #333333;
}
&-divider {
width: 40px;
height: 4px;
background: #FFC842;
border-radius: 3px;
}
&_fixed {
position: fixed;
right: 36px;
height: 71px;
background: #fff;
}
}
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
&-insurance {
&-item {
display: flex;
align-items: center;
// width: 275px;
height: 76px;
&-middle {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
margin: 0 10px 0 8px;
padding: 3px 0;
width: 169px;
height: 44px;
.UFII-middle-main {
font-size: 0;
text-align: left;
&-title {
margin-right: 8px;
font-size: 16px;
font-weight: 600;
color: #242629;
}
&-status {
display: inline-block;
width: 44px;
height: 16px;
line-height: 16px;
text-align: center;
background: #FFEAB7;
border-radius: 8px 2px 8px 2px;
font-size: 11px;
font-weight: 400;
color: #EAAD1A;
}
}
.UFII-middle-footer {
text-align: left;
font-size: 12px;
font-weight: 400;
color: #999999;
}
&_enable {
width: auto;
}
}
&-left {
width: 72px;
height: 24px;
line-height: 24px;
text-align: center;
background: #FFC842;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #333333;
}
&:not(:last-child) {
border-bottom: 1px solid #EBEBEB;
}
}
}
}
&-service {
margin: 0 16px 14px;
padding: 20px 20px 0 20px;
background-color: #FFFFFF;
border-radius: 14px;
&-title {
margin-bottom: 3px;
text-align: left;
font-size: 18px;
font-weight: 600;
color: #242629;
}
&-main {
&-item {
display: flex;
align-items: center;
padding: 0;
height: 61px;
/deep/ .cr-cell__left-icon {
margin-right: 12px;
height: auto;
.cr-icon__image {
width: 20px;
height: 20px;
}
}
/deep/ .cr-cell__title {
flex: 0 1 auto;
font-size:16px;
font-weight:400;
color:rgba(51,51,51,1);
}
&-svg {
width: 16px;
height: 16px;
}
&:not(:last-child):after {
left: 0;
border-bottom: 1px solid #EBEBEB;
transform: scaleY(1);
}
}
}
}
&-logo {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 130px 33.92px;
font-size: 0;
&-svg {
margin-bottom: 3.08px;
width: 116px;
height: 43px;
}
&-desc {
margin: 0;
width: 100px;
height: 19px;
line-height: 19px;
background: #FFFFFF;
border-radius: 14px;
font-size: 11px;
font-weight: 400;
color: #CCCCCC;
}
}
}
\ No newline at end of file
src/views/User/index.vue 0 → 100644
View file @ ae3bd3ce
<template>
<div class="user">
<div class="user-info">
<div class="user-info-account">
<span>未登录</span>
<span>点击登录</span>
</div>
<div class="user-info-image">
<cr-image round width="60px" height="60px" fit="cover" :src="avatar" />
<svg-icon icon-class="certification" class-name="user-info-image-certification" />
</div>
</div>
<div class="user-insurance">
<div class="user-insurance-list">
<div class="user-insurance-list-icon">
<svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" />
<div class="user-insurance-list-icon-dot"></div>
</div>
<span class="user-insurance-list-title">全部保单</span>
</div>
<div class="user-insurance-divider"></div>
<div class="user-insurance-list">
<div class="user-insurance-list-icon">
<svg-icon icon-class="claims-apply" class-name="user-insurance-list-icon-svg" />
<!-- <div class="user-insurance-list-icon-dot"></div> -->
</div>
<span class="user-insurance-list-title">申请理赔</span>
</div>
</div>
<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 }">
<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">
<p class="user-service-title">我的服务</p>
<div class="user-service-main">
<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" />
</cr-cell>
<cr-cell title="客服电话" :icon="customerService" class="user-service-main-item">
<svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
</cr-cell>
</div>
</div>
<div class="user-logo">
<svg-icon icon-class="logo" class-name="user-logo-svg" />
<p class="user-logo-desc">了解芒果保险</p>
</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";
import customerService from "@/assets/images/user/customer-service@1x.png";
import help from "@/assets/images/user/help@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png";
export default {
data() {
return {
medical,
casualty,
illness,
life,
avatar,
customerService,
help,
isFixed: false
};
},
methods: {
// scrollEvent() {
// this.$nextTick(() => {
// const offsetWidth = document.querySelector('.user-family-info').offsetWidth;
// const scrollWidth = document.querySelector('.user-family-info').scrollWidth;
// this.isShow = scrollWidth > offsetWidth;
// });
// }
},
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>
vue.config.js
View file @ ae3bd3ce
...@@ -3,11 +3,6 @@ const resolve = dir => path.join(__dirname, dir); ...@@ -3,11 +3,6 @@ const resolve = dir => path.join(__dirname, dir);
const IS_PROD = process.env.NODE_ENV === "production"; const IS_PROD = process.env.NODE_ENV === "production";
module.exports = { module.exports = {
configureWebpack: {
externals: {
vue: "Vue"
}
},
chainWebpack: config => { chainWebpack: config => {
// 修复HMR // 修复HMR
config.resolve.symlinks(true); config.resolve.symlinks(true);
......
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