Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
ddd34de6 by simon
Options

默认提交

0 parents
Expand all
Inline Side-by-side
Showing 96 changed files with 3612 additions and 0 deletions
> 1%
last 2 versions
# root = true
# [*]
# charset = utf-8
# indent_style = space
# indent_size = 4
# end_of_line = lf
# insert_final_newline = true
# trim_trailing_whitespace = true
root = true
[*]
# indent_style = tab
indent_style = space
# indent_size = 4
indent_size = 2
tab_width = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[*.{json,yml,wxml,html,vue,js}]
indent_style = tab
indent_size = 2
tab_width = 2
[README.md]
trim_trailing_whitespace = ignore
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
\ No newline at end of file
NODE_ENV = 'production'
VUE_APP_TITLE = 'fev'
\ No newline at end of file
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
// 'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"no-unused-vars": 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
.DS_Store
node_modules
/dist
/fev
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# vue-cli3-framework
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run dev
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/app'
]
}
/**
* Created by pc on 2018/5/11.
* 需要的库为(co, ali-oss, glob)
* npm i co ali-oss glob --save
* ossConfig.json格式如下
{
"region": "oss-cn-shanghai", //OSS region
"accessKeyId": "XXXXXXXX", //OSS accessKeyId
"accessKeySecret": "XXXXXXXX", //OSS accessKeySecret
"bucket": "ogo", //OSS bucket
"localPath": "./dist/**", //本地需要上传的文件目录,(/**)为遍历根号后所有目录
"ossPath": "/mobile/", //oss线上文件目录(不能为根目录,避免误操作,最后加上'/')
"callbackUrl": "http://nodejs.org/dist/index.json" //预留请求服务器更新缓存的API
}
*
*
*/
let co = require('co')
let OSS = require('ali-oss')
let glob = require('glob')
let http = require('http')
let Config = require('./ossConfig.json')
// 配置oss信息
let client = new OSS({
region: Config.region,
accessKeyId: Config.accessKeyId,
accessKeySecret: Config.accessKeySecret,
bucket: Config.bucket
})
// 删除线上目录
function deleteFiles() {
if (Config.ossPath !== '' && Config.ossPath !== '/') {
co(function* () {
let result = yield client.list({
prefix: Config.ossPath.slice(1, -1),
marker: Config.ossPath.slice(0, -1)
})
let index = 0
if (result.objects !== undefined) {
yield result.objects.map(i => {
co(function* () {
yield client.delete(i.name)
index += 1
if (index === result.objects.length) {
console.log(`全部删除成功~,总共${result.objects.length}个文件`)
uploadFiles()
}
})
})
} else {
uploadFiles()
}
}).catch(function (err) {
console.log(err)
})
} else {
console.error('上传失败,线上路径为根目录~')
}
}
function uploadFiles() {
// 遍历目录树之后上传
glob(Config.localPath, {
nodir: true
}, (er, files) => {
let index = 0
files.map(i => {
co(function* () {
let ossPath = Config.ossPath.substr(Config.ossPath.length - 1, 1) === '/' ? Config.ossPath.slice(0, -1) : Config.ossPath
yield client.put(ossPath + i.slice(6), i)
index += 1
if (index === files.length) {
consoleStr(files.length)
}
}).catch(function (err) {
console.error(err.params.object)
})
})
})
}
function consoleStr(length) {
console.log(`全部上传成功~,总共${length}个文件`)
// http.get(Config.callbackUrl, () => {
// console.log('更新缓存成功~')
// }).on('error', (e) => {
// console.error(`错误: ${e.message}`)
// })
}
// 清空目录后上传
// deleteFiles()
// 增量上传
uploadFiles()
\ No newline at end of file
{
"region": "oss-cn-shenzhen",
"accessKeyId": "LTAIhDZsL5yCN90c",
"accessKeySecret": "LIj3OEJ8cMCQeRlUVVznJpMek2dPD2",
"bucket": "kdcdn",
"localPath": "./dist/**",
"ossPath": "/app/rtdn/",
"callbackUrl": "http://nodejs.org/dist/index.json"
}
\ No newline at end of file
# chmod u+x git.sh
unset msg
read -p "请输入commit提交的描述: " msg
if [[ $msg == "" ]]; then
msg="默认提交"
fi
git add -A
git commit -m $msg
git push
git status
This diff could not be displayed because it is too large.
{
"name": "vue-cli3-framework",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build --no clean",
"fev": "vue-cli-service build --mode fev",
"lint": "vue-cli-service lint",
"oss": "node build/oss-released.js"
},
"dependencies": {
"ali-oss": "^6.1.1",
"amfe-flexible": "^2.2.1",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.16.0",
"co": "^4.6.0",
"core-js": "^2.6.5",
"glob": "^7.1.4",
"mockjs": "^1.0.1-beta3",
"postcss-pxtorem": "^4.0.1",
"ua-device": "^0.1.10",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-i18n": "^8.15.0",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prerender-spa-plugin": "^3.4.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
}
}
// module.exports = {
// plugins: {
// 'autoprefixer': {
// browsers: ['Android >= 4.0', 'iOS >= 7']
// },
// 'postcss-pxtorem': {
// rootValue: 75,
// propList: ['*'],
// selectorBlackList: []
// }
// }
// }
\ No newline at end of file
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>平安人寿保险官网</title>
</head>
<body>
<noscript>
<strong>We're sorry but website doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<v-header></v-header>
<main ref="container" class="main-container">
<router-view/>
</main>
<v-footer></v-footer>
</div>
</template>
<script>
import { mapGetters, mapActions, mapState } from "vuex";
import VHeader from "@components/home/header/header.vue";
import VFooter from "@components/home/footer/footer.vue";
var UA = require("ua-device");
export default {
name: "app",
components: {
VHeader,
VFooter
},
computed: {
...mapState({
isMobile: state => state.isMobile
})
},
methods: {
...mapActions(["pcorphone"])
},
created() {
let _this = this;
// 设置UA
let output = new UA(navigator.userAgent);
let deviceType = output.device.type;
let isMobile = deviceType == "mobile";
this.$store.commit("IS_MOBILE", isMobile);
}
};
</script>
<style lang="scss">
@import "@/styles/_support";
html {
font-family: SourceHanSansCN, -apple-system, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
font-size: 12px;
word-spacing: 1px;
word-break: break-word;
text-rendering: optimizeLegibility;
color: #333;
background-color: #ffffff;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
body,
div {
border: 0;
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td,
iframe {
margin: 0;
padding: 0;
}
img,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
display: block;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
dfn,
em,
th,
var,
i,
em {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
&:hover {
text-decoration: none;
}
}
a,
label,
button,
input,
select {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input,
select,
button {
font: 100% tahoma, "\5b8b\4f53", arial;
vertical-align: baseline;
border-radius: 0;
background-color: transparent;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
}
button::-moz-focus-inner,
input,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
margin: 0;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
input[type="search"],
input[type="tel"],
input[type="text"],
input {
-webkit-appearance: none; /*去除系统默认的样式*/
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
textarea {
outline: none;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
overflow: auto;
resize: none;
font: 100% tahoma, "\5b8b\4f53", arial;
}
#app {
border: 0;
margin: 0;
padding: 0;
}
.main-container {
position: relative;
margin: 0 auto;
width: 100%;
// max-width: 1024px; // 设计稿宽度
min-height: 40rem;
&::after {
display: table;
content: "";
clear: both;
}
}
.content {
// width: 1024px;
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
.box-w {
// width: 1024px;
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
.box {
// width: 950px;
max-width: 950px;
width: 100%;
margin: 0 auto;
}
.app__width {
width: 750px;
}
.app__width {
width: 750px;
}
.app__inner {
margin: 20px;
}
.app__title {
font-size: $fontSize;
line-height: $fontSize + 4px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 0.5px solid #eeeeee;
}
.app__desc {
font-size: $fontSizeSmaller;
line-height: $fontSizeSmaller + 2px;
margin-bottom: 20px;
color: $colorGray;
}
.app__bgc {
position: fixed;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.app__bg {
position: absolute;
width: 100%;
height: 100%;
}
.app__top-shadow {
position: fixed;
width: 750px;
height: 1px;
box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07);
background-color: #ffffff;
}
.app__content {
position: relative;
}
.btn {
cursor: pointer;
}
.swiper-pagination-bullet {
width: 1rem !important;
height: 1rem !important;
}
.swiper-pagination-bullet-active {
background: #f05a23 !important;
}
</style>
module.exports = {
testListGet: '/xxx/xxx/list'
}
\ No newline at end of file
import axios from 'axios';
// import {
// Toast
// } from 'vant';
function Toast(msg) {
console.log("msg:", msg);
}
// axios的默认url
// axios.defaults.baseURL = ""
// 服务器地址
let base = "https://ow.go.qudone.com";
if (location.href.indexOf("//k.wxpai.cn") > 0) {
base = "https://api.k.wxpai.cn/bizproxy"
}
// let base = COM.baseUrl;
// 请求拦截器
// axios.interceptors.request.use(
// config => {
// // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = "token"; //这里写入token
// token && (config.headers.Authorization = token);
// return config;
// },
// error => {
// return Promise.error(error);
// })
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
if (response.data.code === 200) {
return Promise.resolve(response);
} else {
Toast(response.data.bizMsg);
return Promise.reject(response);
}
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
);
//formDataHeaders设置
let formDataHeaders = {
headers: {
"Content-Type": "multipart/form-data"
}
}
/**
* 封装get方法
* @param {*} params
*/
export const httpGet = params => {
let {
url,
data
} = params;
return axios.get(`${base}${url}`, {
params: data
}).then(res => res.data.content);
}
/**
* 封装post方法
* @param {*} params
*/
export const httpPost = params => {
let {
url,
data
} = params;
return axios.post(`${base}${url}`, data).then(res => res.data.content);
}
/**
* 封装post方法
* @param {*} params
* data数据是 formdata格式
* 例如：
* this.file = file
let data = new FormData() //使用formData对象
data.append('path', '/pro/mzczcradmin/')
data.append('file', file.file)
*/
export const formdata = params => {
let {
url,
data
} = params;
return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data);
}
\ No newline at end of file
import * as api from './api';
export default api;
// @font-face {
// font-family: 'vivo-BoldExtended';
// src: url('./vivo-BoldExtended.ttf');
// font-weight: normal;
// font-style: normal;
// }
// @font-face {
// font-family: 'vivo-Regular';
// src: url('./vivo-Regular.ttf');
// font-weight: normal;
// font-style: normal;
// }
// @font-face {
// font-family: 'regular2';
// src: url('./regular2.otf');
// font-weight: normal;
// font-style: normal;
// }
\ No newline at end of file
module.exports = {
message: {
login: 'Login',
Username: 'Username',
Password: 'Password',
Captcha: 'Captcha',
Language: 'Language',
zh: 'Chinese',
en: 'English'
},
nav: {
ttt: "2"
}
}
module.exports = {
message: {
login: 'Login',
Username: 'Username',
Password: 'Password',
Captcha: 'Captcha',
Language: 'Language',
zh: 'Chinese',
en: 'English'
},
nav: {
ttt: "2"
}
}
module.exports = {
message: {
login: '登录',
Username: '用户名',
Password: '密码',
Captcha: '验证码',
Language: '语言',
zh: '中文',
en: '英文'
},
nav: {
ttt: "1"
}
}
<template>
<div class="bottom-tips" v-if="visb">
<div class="line"></div>
<div class="tips-wrap">
<div class="tips">{{innerText ? innerText :'我是有底线的'}}</div>
</div>
</div>
</template>
<script>
export default {
props: ['visb', 'innerText'],
data() {
return {
key: 'value'
}
},
created() {
console.log('visb:', this.visb)
}
}
</script>
<style lang="less" scoped>
/// 底线
.bottom-tips {
position: relative;
padding: 40px 0;
width: 100%;
text-align: center;
color: #666666;
.line {
border-bottom: dashed 1px #cccccc;
width: 80%;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
.tips-wrap {
font-size: 28px;
display: flex;
justify-content: center;
.tips {
position: relative;
padding: 0 20px;
background-color: #ffffff;
}
}
}
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {
}
}
\ No newline at end of file
@import '@/styles/_support';
<template>
<div class="comp">
</div>
</template>
<script src="./demo-item.js"></script>
<style lang="scss" scoped>
@import "./demo-item.scss";
</style>
\ No newline at end of file
<template>
<div class="empty-tips" v-if="visb">
<div class="tips">
<span class="iconfont iconempty"></span>
<div class="tips">{{innerText ? innerText :'这里空空如也~'}}</div>
</div>
</div>
</template>
<script>
export default {
props: ['visb', 'innerText'],
data() {
return {
key: 'value'
}
}
}
</script>
<style lang="scss" scoped>
.empty-tips {
box-sizing: border-box;
position: fixed;
text-align: center;
color: #666666;
font-size: 32px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
top: 35%;
.iconfont {
font-size: 100px;
}
.tips {
position: relative;
padding: 20px;
}
}
</style>
import {
mapState
} from 'vuex'
export default {
name: "DropDownList",
data() {
return {
activeIndex: 0,
sTitle: this.title,
};
},
props: {
type: {
type: String,
default () {
return "nav";
}
},
title: {
type: String,
default () {
return "";
}
},
dataList: {
type: Array,
default () {
return [];
}
},
labelProperty: {
type: String,
default () {
return "name";
}
}
},
directives: {
dpl: {
bind(el) {
el.style.display = "none";
}
}
},
methods: {
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
},
onOutHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "none";
},
onClickHandler(index) {
// 隐藏其他
let path = event.path || (event.composedPath && event.composedPath()); //兼容火狐和safari
path[1].style.display = "none";
// 选择item
this.activeIndex = index;
let curData = this.dataList[index];
if (this.type == "lang") {
// 如果是语言设置，则设置语言
let lang = curData.value;
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
this.sTitle = curData.name;
} else {
// 不是的话，跳转页面
this.$router.push({
path: curData.path
})
}
// console.log("name:", this.dataList[index].name);
// this.$emit("change", {
// index: index,
// value: this.dataList[index]
// });
}
},
computed: {
dplLable() {
return this.dataList[this.activeIndex][this.labelProperty];
}
},
created() {
// this.
},
};
@import '@/styles/_support';
.drop-list {
display: inline-block;
min-width: 6.25rem;
position: relative;
margin: 0 1rem;
.list {
position: absolute;
width: 100%;
.space {
height: 1.5rem;
}
}
span {
display: block;
text-align: center;
}
span:hover {
// background: #f6f6f6;
// color: #ec6429;
}
ul {
display: none;
overflow: hidden;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
border-radius: .5rem;
li {
border-bottom: solid 1px #f1f1f1;
background: #ffffff;
height: 4.25rem;
line-height: 4.25rem;
text-align: center;
}
li:last-child {
border-bottom: none;
}
li:hover {
// background: #f6f6f6;
color: #ec6429;
}
}
}
<template>
<div>
<div class="drop-list" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<span>
{{sTitle}}
<i></i>
</span>
<div class="list">
<div class="space"></div>
<ul v-dpl>
<li v-for="(item, index) in dataList" :key="index" @click="onClickHandler(index, $event)">{{item[labelProperty]}}</li>
</ul>
</div>
</div>
</div>
</template>
<script src="./dropdown.js"></script>
<style lang="scss" scoped>
@import "./dropdown.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
toPage(name) {
this.$router.push({
name: name
})
},
initData() {}
},
mounted() {},
created() {}
}
// @import '@/styles/_support';
@import '@/styles/_utils';
.v-footer {
font-family: MicrosoftYaHei;
color: #ffffff;
background-color: #2e2b2a;
.footer-containter {
margin: 0 auto;
max-width: 950px;
.cont {
margin-left: 3.166667rem;
.logo-wrap {
padding: 1.75rem 0;
.logo-img {
cursor: pointer;
}
}
.line {
width: 100%;
height: 1px;
opacity: 0.2;
background-color: #ffffff;
}
// 信息
.info {
padding: 1.25rem 0 1.5rem;
display: flex;
// 热线
.hotline {
margin-right: 4.2rem;
.contact {
.n-item {
margin-bottom: 0.6rem;
}
.phone {
font-family: Arial;
color: #ea5a26;
font-size: 1.666667rem;
font-weight: bold;
}
&:first-child {
margin-bottom: 2rem;
}
}
}
// 导航
.nav {
flex: 1;
display: flex;
.nav-v {
margin: 0 5.2rem;
}
.n-item {
cursor: pointer;
}
}
.focus {
width: 6.25rem;
text-align: center;
margin-right: 3rem;
.qrcode {
margin-top: .75rem;
}
}
// 公共组件
.n-item {
margin-bottom: 1.416667rem;
color: rgba(179, 177, 168, 0.5);
&:first-child {
color: #ffffff;
margin-bottom: 2rem;
}
&:last-child {
margin-bottom: 0;
}
}
}
// 版权
.copyright {
color: rgba(179, 177, 168, 0.5);
padding: 1.5rem 0;
line-height: 1.58;
}
}
}
}
@media (max-width: 950px) {
.v-footer {
.footer-containter {
.cont {
.info {
display: block;
.nav {
margin-top: 2rem;
.nav-v {
margin: 0 1.6rem 0 0;
}
}
.focus {
margin-top: 2rem;
text-align: left;
}
}
.copyright {
box-sizing: border-box;
padding-right: 2rem;
}
}
}
}
}
<template>
<footer class="v-footer">
<div class="footer-containter">
<div class="cont">
<div class="logo-wrap">
<img class="logo-img" src="@/assets/images/home/footer-logo.png" alt="中国平安人寿保险">
</div>
<div class="line"></div>
<!-- 信息 -->
<div class="info">
<div class="hotline">
<div class="contact">
<div class="n-item">香港号码</div>
<div class="phone">(852)2983 8866</div>
</div>
<div class="contact">
<div class="n-item">内地号码</div>
<div class="phone">(86)40078 95511</div>
</div>
</div>
<div class="nav">
<div class="nav-v">
<div class="n-item">關於我們</div>
<div class="n-item">集团介绍</div>
<div class="n-item">新聞資訊</div>
<div class="n-item">加入我們</div>
</div>
<div class="nav-v">
<div class="n-item">幫助中心</div>
<div @click="toPage('privacy')" class="n-item">隱私政策</div>
<div @click="toPage('terms')" class="n-item">使用條款</div>
<div class="n-item">网站地图</div>
</div>
<div class="nav-v">
<div class="n-item">聯絡我們</div>
<div class="n-item">联系方式</div>
<div class="n-item">服务网点</div>
</div>
</div>
<div class="focus">
<div class="tit">官方公眾號</div>
<img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt="">
</div>
</div>
<div class="line"></div>
<!-- 版权 -->
<div class="copyright">
版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!
<br>Copyright © PING AN INSURANCE (GROUP) COMPANY OF CHINA ，LTD. All Rights Reserved
</div>
</div>
</div>
</footer>
</template>
<script src="./footer.js"></script>
<style lang="scss" scoped>
@import "./footer.scss";
</style>
import {
mapState
} from 'vuex'
import VDropdown from '@components/home/dropdown/dropdown.vue'
export default {
name: 'VHeader',
components: {
VDropdown
},
data() {
return {
maxClientWidth: 950,
navList: [{
name: "產品介紹",
list: []
},
{
name: "客戶服務",
list: [{
name: "保單查詢",
path: ""
},
{
name: "理賠報案",
path: ""
},
{
name: "客戶投訴",
path: ""
},
{
name: "保全變更",
path: ""
},
{
name: "聯繫方式",
path: ""
},
{
name: "續期繳費",
path: ""
},
{
name: "預約服務",
path: ""
}
]
},
{
name: "新聞資訊",
list: []
},
{
name: "關於平安人壽",
list: [{
name: "公司簡介",
path: "/profile"
},
{
name: "領導人概況",
path: ""
},
]
},
],
langData: {
name: "繁",
list: [{
name: "繁",
path: "",
value: "tc"
},
{
name: "简",
path: "",
value: "zh"
},
{
name: "EN",
path: "",
value: "en"
},
]
}
}
},
computed: {
...mapState({
isSmallScreen: state => state.isSmallScreen
})
},
methods: {
toIndex() {
this.$router.push({
path: "/"
})
},
checkIsSmallScreen() {
const self = this;
if (document.body.clientWidth > self.maxClientWidth) {
self.$store.commit('IS_SMALL_SCREEN', false)
} else {
self.$store.commit('IS_SMALL_SCREEN', true)
}
}
},
mounted() {
const self = this;
self.checkIsSmallScreen();
document.body.onresize = () => {
self.checkIsSmallScreen();
}
}
}
.v-header {
font-family: SourceHanSansCN;
height: 5.833333rem;
background-color: #fff;
color: #4c4948;
position: relative;
z-index: 11;
.header-container {
max-width: 950px;
height: 100%;
margin: auto;
display: flex;
align-items: center;
position: relative;
}
.main-nav {
height: 100%;
flex: 1 0 auto;
}
.logo-img {
margin-right: 2rem;
cursor: pointer;
}
.nav-list {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
}
.nav-item {
display: flex;
align-items: center;
height: 100%;
margin: 0;
font-size: 1rem;
// padding: 0 4.166667rem;
-ms-flex-pack: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.main-nav-list {
display: flex;
cursor: pointer;
}
.nav-item.link-item {
padding: 0 50px;
height: 5rem;
}
.nav-item.search {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
cursor: auto;
}
.nav-item.submit {}
.nav-item.auth {
color: #ffffff;
.user {
width: 7.333333rem;
height: 2.25rem;
background-color: #f05a23;
border-radius: 1.333333rem;
display: flex;
align-items: center;
justify-content: center;
// margin-right: 2rem;
.icon-img {
margin: 0 .5rem;
}
}
.lang {
color: #f05a23;
}
}
}
@media (max-width: 950px) {
.v-header {
.header-container {
width: 96%;
}
}
}
@media (max-width: 800px) {
.v-header {
.main-nav-list {
display: none;
}
}
}
<template>
<header class="v-header">
<div class="header-container">
<img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
<div class="main-nav">
<div class="nav-list">
<div class="main-nav-list">
<v-dropdown v-for="item in navList" :key="item.id" :title="item.name" :data-list="item.list">
</v-dropdown>
</div>
<div class="nav-item search">
</div>
<div class="nav-item submit">
</div>
<div class="nav-item auth">
<div class="user">
<img class="icon-img" src="@/assets/images/home/icon-user.png"> 登入
</div>
<v-dropdown class="lang" :type="'lang'" :title="langData.name" :data-list="langData.list"></v-dropdown>
</div>
</div>
</div>
</div>
</header>
</template>
<script src="./header.js"></script>
<style lang="scss" scoped>
@import "./header.scss";
</style>
// 全局事件
module.exports = {
NAV_FILTER: '_nav_filter', // 导航菜单过滤，触发请求
TAB_SELECT: '_tab_select', // 选择tab ，主题 classify
EVT_SET_TAB_INDEX: '_evt_set_tab_index', // 选择tab ，主题 classify
EVT_TAB_INDEX_CHANGE: '_evt_tab_index_change', // 从navbar发至index 点击头部导航 index
}
\ No newline at end of file
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App.vue';
import router from './router';
import store from './store/index';
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
import Mock from './mock'
Mock.bootstrap();
// import 'amfe-flexible';
Vue.config.productionTip = false
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.getItem("lang") || 'zh', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh': require('@/common/lang/zh'), // 中文语言包
'en': require('@/common/lang/en') // 英文语言包
}
})
new Vue({
i18n,
router,
store,
render: h => h(App),
mounted: () => {
document.dispatchEvent(new Event('render-event'));
}
}).$mount('#app')
import Mock from 'mockjs';
const LoginUsers = [
{
id: 1,
username: 'admin',
password: 'admin',
avatar: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png',
name: '张某某'
}
];
const Users = [];
for (let i = 0; i < 5; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
province: Mock.Random.province(),
city: Mock.Random.city(),
fieldName: Mock.Random.cname(),
address: Mock.mock('@county(true)'),
'age|18-60': 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
}));
}
export { LoginUsers, Users };
import mock from './mock';
export default mock;
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import {
LoginUsers,
Users
} from './data/user';
let _Users = Users;
export default {
/**
* mock bootstrap
*/
bootstrap() {
return;
// 紧在dev环境下使用
if (process.env.NODE_ENV !== "development") {
return;
}
let mock = new MockAdapter(axios);
// mock success request
mock.onGet('/success').reply(200, {
msg: 'success'
});
// mock error request
mock.onGet('/error').reply(500, {
msg: 'failure'
});
// 拦截 get方法demo
mock.onGet('/path1/path2/getdemo').reply(config => {
// 拦截参数
let {
params1,
params2
} = config.params;
return new Promise((resolve, reject) => {
let content = {};
let success = true;
resolve([200, {
code: 2000,
msg: '请求成功',
success,
content
}]);
});
});
// 拦截post方法demo
mock.onPost('/path1/path2/postdemo').reply(config => {
let {
params1,
params2
} = JSON.parse(config.data);
return new Promise((resolve, reject) => {
let content = {};
let success = true;
resolve([200, {
code: 2000,
msg: '请求成功',
success,
content
}]);
});
});
}
};
<template>
<div class="about">
<h1>This is an about page</h1>
<div class="cc">
about
<div class="ddd">123about3</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.cc {
.ddd {
width: 746px;
height: 300px;
background-color: wheat;
}
}
</style>
<template>
<div class="page">
index
</div>
</template>
<script>
export default {
name: "home",
components: {
VHeader
}
};
</script>
<style lang="scss" scoped>
.home {
text-align: center;
}
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {}
<template>
<div class="content">
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
// renderBullet(index, className) {
// return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
// }
}
}
}
},
components: {},
methods: {
toNewsDetail(){
this.$router.push({
path:'/news/detail'
})
},
chn(val) {
if (val == 1) {
this.$i18n.locale = 'en'
localStorage.setItem("lang", "en");
} else {
this.$i18n.locale = 'zh'
localStorage.setItem("lang", "zh");
}
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
padding-bottom: 2.25rem;
}
.top-space {
height: 2.25rem;
}
.box {
position: relative;
}
// banner 轮播
.banner {
box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
}
// 推荐产品
.recommend {
display: flex;
justify-content: space-between;
margin-top: 2.25rem;
&-item {
position: relative;
width: 25.833333rem;
border-radius: .75rem;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #fbfbfb;
.btn {
position: absolute;
// width: 13.5rem;
// height: 4.1rem;
// top: 30.2rem;
width: 52%;
height: 11%;
top: 81%;
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
}
img {
width: 100%;
}
}
}
// 了解我们
.more {
margin: 3.5rem auto 0;
position: relative;
.btn {
position: absolute;
width: 26%;
height: 8%;
top: 83%;
left: 69%;
z-index: 1;
}
.cont {
position: relative;
margin: 0 auto;
// @extend .fcc;
width: 85%;
img {
width: 100%;
}
}
}
// 新闻资讯
.news {
margin: 4.25rem auto 0;
.linear {
width: 100%;
height: 2.04rem;
background-image: url('~@/assets/images/index/linear.png');
}
.tit {
font-family: MicrosoftYaHei;
text-align: center;
color: #f05a23;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.under-line {
margin: .75rem auto 0;
width: 4rem;
height: .25rem;
background-color: #275d40;
}
.news-wrap {
margin: 3.2rem auto 0;
max-width: 66.75rem;
.more {
text-align: right;
margin-bottom: .5rem;
}
.news-item {
height: 4.25rem;
color: #4c4948;
display: flex;
justify-content: space-between;
align-items: center;
border-top: solid 1px #dcdddd;
&-tit {
cursor: pointer;
}
&-date {}
&:last-child {
border-bottom: solid 1px #dcdddd;
}
}
}
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
}
@media (max-width: 950px) {
.box {
width: 96%;
}
}
<template>
<div class="content">
<div class="top-space"></div>
<!-- banner 轮播 -->
<div class="box-w banner">
<swiper :options="swiperOption">
<swiper-slide>
<img src="@/assets/images/index/banner.png">
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- 推荐产品 -->
<div class="box recommend">
<div class="recommend-item">
<div class="btn"></div>
<img src="@/assets/images/index/recommend-1.png">
</div>
<div class="recommend-item">
<div class="btn"></div>
<img src="@/assets/images/index/recommend-2.png">
</div>
<div class="recommend-item">
<!-- {{t}} -->
<div class="btn"></div>
<img src="@/assets/images/index/recommend-3.png">
</div>
</div>
<!-- 了解我们 -->
<div class="box more">
<div class="cont">
<div class="btn"></div>
<img src="@/assets/images/index/more-1.png">
</div>
</div>
<!-- 新闻资讯 -->
<div class="box news">
<div class="linear"></div>
<div class="tit">新聞資訊</div>
<div class="under-line"></div>
<div class="news-wrap">
<div class="more">
查看更多 >
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div>
<div class="news-item-date">2019-09-27</div>
</div>
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
toNewsList() {
// this.$router.push({
// path: "/news/list"
// })
this.$router.go(-1);
},
initData() {}
},
mounted() {},
created() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
}
@import '@/styles/_support';
.content {
font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
.box {
position: relative;
max-width: 64rem;
}
.top-space {
height: 5rem;
}
.tit {
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.back {
text-align: right;
margin-top: .75rem;
cursor: pointer;
}
.dat {
margin-top: 2.5rem;
display: flex;
.date {
display: flex;
margin-right: 4rem;
.icon-clock {
height: 1.25rem;
margin-right: .5rem;
}
}
}
.desc {
max-width: 64rem;
margin-top: 2.5rem;
line-height: 2;
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
}
}
<template>
<div class="content">
<div class="top-space"></div>
<h2 class="tit">中國平安，與時代同行！</h2>
<div @click="toNewsList" class="box back">返回列表頁 ></div>
<div class="box dat">
<div class="date"> <img class="icon-clock" src="@/assets/images/news-detail/icon-clock.png" alt=""> 發布時間：2019-09-27</div>
<div class="pv">閱讀人數：256人</div>
</div>
<div class="box desc">
&nbsp;&nbsp;&nbsp;&nbsp;中國平安的發展，與改革開放同步。1988年，中國平安在深圳應運而生，壹路走來，實現了收入、市值、納稅等指標年均逾20%的復合增長，為2億多客戶提供服務。從國內首家股份制保險公司、首個綜合金融集團到全球上市保險公司市值第壹……平安的每壹次突破，都得益於改革開放的政策推動。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;新中國成立70周年之際，我們為企業的成就感到自豪，更感恩時代的機遇。服務國計民生是平安的初心與使命，進入新時代，我們進壹步開發“金融+科技”潛能，強化創新驅動；我們發揮企業資源優勢，開展精準扶貧，助力脫貧攻堅。
<br><br><br>
<strong>打造智慧城市，提供多維度技術支撐</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;近十年來，平安從參與智慧城市建設入手，構建可覆蓋財政、衛健、交通、司法、農業等21個功能板塊的“1+N”智慧城市壹體化平臺體系，助力各省市克服“城市病”，實現“優政、興業、惠民”的目標。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;優政，助力政府提升運轉效率、效能。平安的智慧財政系統已被財政部PPP中心和幾十個省市推廣應用，管理約萬億元資產。這項技術幫地方政府解決負債管理難、融資難、融資貴等問題，提升資產運營效率超50%。平安的智慧司法壹體化平臺與法院系統合作，促進司法體制改革、提高審判效率質量，提升整體司法水平，優化法治營商環境。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;興業，服務實體經濟，改善營商環境。我們利用區塊鏈技術，構建了金融貿易供應鏈壹體化平臺，鏈接數百家銀行、上萬個貿易機構和供應鏈企業，支持粵港澳大灣區實現人流、物流、資金流、信息流的互聯互通，促進實體經濟發展，助力深圳中國特色社會主義先行示範區建設。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;惠民，提高政府服務效率，優化市民體驗。平安在深圳、廣州等20多個城市落地智慧交通，提供出行暢通、交通安全、運輸監控與交管服務，實施區域平均車速提升12.4%，交通事故率下降10%，重點路段擁堵時間縮短30%。平安的智慧衛健壹體化平臺，集成智能診斷、智能醫保等功能，在近200個城市覆蓋12000多家醫療機構，幫助患者節省問診時間和醫療費用。
<br><br><br>
<strong>發力精準扶貧，開展全方位資源保障</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;近年來，平安積極投身扶貧事業，緊扣“精準”二字，聚焦產業扶貧、健康扶貧、教育扶貧，構建並實施“村官、村醫、村教”三村扶貧工程。在集團黨委和全公司1000多個基層黨組織的號召下，累計80多萬平安人參與扶貧工作。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;村官工程，幫助鄉村產業升級。平安從種植、養殖業入手，為偏遠貧困地區提供全面的生產、技術和資金支持。在種植業前端，我們首創“平安扶貧保”產業扶貧模式，撬動扶貧貸款，為貧困戶免費提供優種、合作種植、保護性回購等壹條龍服務；在中端，提供遙感、智能識別等技術，提高農業生產力；在後端，提供電銷平臺服務。截至目前，集團及平安銀行為內蒙古、貴州等9省份貧困地區提供扶貧貸款余額逾800億元，集團協銷扶貧產品總額數千萬元，帶動數十萬貧困人口加速脫貧。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;村醫工程，幫助打造健康鄉村。平安通過遠程醫療、智能讀片等技術，連接村民與城市的優質醫療資源，提升鄉村醫療服務水平。近兩年來，我們累計升級鄉村衛生所近800所，購置多臺移動醫院設備，組織名醫專家，深入貧困地區壹線開展村民體檢義診活動。通過創新的雲端平臺，實時上傳檢查報告至後方數據中心，及時向村民警示疾病風險，向地方衛生機構通報重大疾病情況，降低因病致貧、因病返貧風險。平安的移動醫院現已行駛數十萬公裏，為近百個鄉村提供免費診療服務。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;村教工程，幫助村娃享受智慧教育。平安以雲技術為橋梁，建成“雙師課堂”平臺，將城市優質教育資源引入貧困地區。平安掛牌的智慧小學現有700多所，培訓村小教師近3000名。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;不忘初心，久久為功。我們堅信，中國發展的背後，必有壹批屹立全球的優秀民族企業作為支撐，平安有信心、有信念繼續為中華民族偉大復興上下求索、奮發努力。
</div>
</div>
</template>
<script src="./news-detail.js"></script>
<style lang="scss" scoped>
@import "./news-detail.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
.box {
position: relative;
}
.top-space {
height: 5rem;
}
.tit {
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
line-height: 2;
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
}
}
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
.box {
position: relative;
}
.top-space {
height: 5rem;
}
.tit {
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
line-height: 2;
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
}
}
<template>
<div class="content">
<div class="top-space"></div>
<h2 class="tit">公司簡介</h2>
<div class="box desc">
&nbsp;&nbsp;&nbsp;&nbsp;中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;公司秉承“保險姓保”理念,聚焦“產品+”戰略,延伸壽險產品邊界。2017年對主力保障型產品“平安福”進行優化升級，提升保障額度；細分客群，開發具有癌癥多次給付、長期殘疾護理、高端終身壽險等保障功能的產品，構建多元化保障供給體系；依托集團資源推出就醫360服務，為客戶提供“診斷－ 治療－ 康復”全流程解決方案和服務支持，並結合平安RUN健康行項目，打造“上遊健康預防，中遊經濟補償，下遊醫療服務”的健康閉環，滿足客戶全方位的健康風險管理需求。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;面對互聯網和新科技帶來的挑戰與機遇，平安人壽運用領先科技，打造未來發展新引擎,升級創新業務模式。以“金管家”APP為核心的移動金融生活平臺，連通線上、線下多場景客戶經營。截至2017年12月31日，“金管家”APP為1.36億註冊用戶提供保險保單、財富增值、豐富活動和健康管理等全方位的金融生活服務。在客戶服務方面,平安人壽以科技創造極致客戶體驗。業內首創“智慧客服”, 依托集團海量客戶數據和AI技術, 構建業務甄別、風險定位、在線自助、空中門店四大能力, 大幅提升保全、理賠、核保的服務時效。70%的理賠客戶可以實現30分鐘內賠付，96%的投保可以實時承保。推出兩個月後，”智慧客服”即累計受理空中業務超2.8萬件，日均受理約400件，最快用時3分鐘。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;平安人壽以慈善文化為公司企業文化 , 堅持“執善心，築大業”理念, 以“最受尊敬公司”為願景。百年善業，責任為先。平安人壽始終懷抱感恩之心反哺社會，壹直把企業社會責任作為推動公司可持續發展的動力，聚焦“慈善”文化，弘揚“大愛與責任”。通過開展以“健步行”與“閱讀”為主體的“新生活運動”及教育、扶貧、環境、災難救助等公益事業，專註創造美好明天。
</div>
</div>
</template>
<script src="./profile.js"></script>
<style lang="scss" scoped>
@import "./profile.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
.box {
position: relative;
}
.top-space {
height: 5rem;
}
.tit {
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
line-height: 2;
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
}
}
<template>
<div class="content">
<div class="top-space"></div>
<h2 class="tit">平安壹賬通會員服務協議</h2>
<div class="box desc">
<strong>歡迎您使用平安壹賬通服務！</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;“平安壹賬通”是平安集團旗下網絡綜合資產賬戶管理工具，整合了平安及其他金融、非金融機構網上賬戶。用戶只需壹個賬戶、壹套密碼、壹次登錄，即可輕松實現銀行、投資、保險等個人賬戶管理與資產管理的多種需求，提供壹站式便捷服務。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;下述“平安壹賬通”的表述，既包括指代平安壹賬通服務，也包括指代平安壹賬通服務的提供者。“用戶”或“會員”是指使用平安壹賬通相關服務的使用人，在本協議中更多地稱為“您”。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;在使用平安壹賬通服務之前，請您務必審慎閱讀、充分理解《平安壹賬通會員服務協議》（以下簡稱“本協議”），特別是限制或免除責任的相應條款、法律適用和爭議解決條款。限制或免除責任的相應條款以加粗形式提示您註意。未成年人應在法定監護人的陪同下閱讀。您點擊“閱讀並同意註冊協議”按鈕即表示您確認對本協議全部條款含義已充分理解並完全接受。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;您同意，平安壹賬通有權在必要時修改本協議條款並按法律規定公示，您可以在相關服務頁面查閱最新版本的協議條款。
<br><br>
<li>第壹條 協議的範圍</li>
<li>第二條 賬戶使用規則</li>
<li>第三條 會員的禁止行為</li>
<li>第四條 服務的變更、中斷或終止</li>
<li>第五條 授權條款</li>
<li>第六條 免責條款</li>
<li>第七條 知識產權聲明</li>
<li>第八條 隱私權保護規則</li>
<li>第九條 法律效力</li>
<li>第十條 法律適用和爭議解決</li>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;第壹條 協議的範圍
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;本協議是您與平安壹賬通服務的提供者深圳平安綜合金融服務有限公司（以下簡稱“平安金服”）之間關於您註冊、登錄、使用平安壹賬通服務（包括但不限於PC端、移動端設備等方式登錄並使用平安壹賬通服務）所訂立的協議。
</div>
</div>
</template>
<script src="./protocol.js"></script>
<style lang="scss" scoped>
@import "./protocol.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
.box {
position: relative;
}
.top-space {
height: 5rem;
}
.tit {
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
line-height: 2;
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
}
}
<template>
<div class="content">
<div class="top-space"></div>
<h2 class="tit">使用條款</h2>
<div class="box desc">
<strong>使用條件</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;如閣下使用本網站，即表示閣下完全同意以下的使用條款，並不附加其他限制或規條。在使用本網站前，請先仔細閱讀各條款。有關條款可能隨時作出更改，並在本頁刊登。閣下須遵從有關更改，因此閣下應該定期參閱本頁，以得知相關的最新條款。
<br><br><br>
<strong>免責聲明</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;本網站所載資料是在允許的範圍內盡量依據適用之法律，（1）以“現狀”形式提供，且並不帶有任何明示或隱含的保證，中國平安人壽保險（香港）有限公司（以下簡稱“平安”) 就所有明示或隱含保證作出免責聲明，而此等保證範圍包括但不限於隱含的可銷售性和特殊用途合適性保證 ; (2) 平安並不保證網站或所載資料的功能不會中斷或不含錯誤，也不保證不妥當之處必被更正，或本網站所設之服務器不受病毒或其他有害成份影響 ; 以及(3) 平安不會就使用本網站內資料、或因使用此等資料之正確性、準確性、可靠性或其他方面所導致的後果作出保證或其他聲明。在此所載的資料和說明只可作壹般性參考資料，並非完全旨在提供適用於各產品和服務的所有條款和不適用範圍。詳細資料請參閱實際保單或有關產品或服務之協議。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;本網站可能會接駁到不屬於平安所運作的其他網站。平安不會就第三者網站的有效性、內容或準確性承擔任何責任; 並且不會就使用第三者連結作出任何保證,包括明示或暗示。接駁到此等網站並不代表平安已批核或贊同此等網站或其內容。接駁到此等網站並不代表平安已批核或贊同此等網站或其內容。閣下知道和同意瀏覽這些網站時自己所承受的風險。
<br><br><br>
<strong>法律責任的限制</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;平安会在合理的情况下尽力在本网站刊载准确和最新的资料，但亦有可能出现错误或遗漏。平安在允许的范围内尽量依据适用法律，均不会就本网站内容的准确性在任何情况下，作出保证或声明。平安或任何参与本网站创作、制作或发放网内信息的人士也不会因使用或不能使用本网站内资料而引起的直接、附带、随之发生的、间接或惩罚性赔偿而要向阁下负责，即使平安或平安的授权代表已被通知此等赔偿的可能性。在允许的范围内尽量依据适用之法律，无论在任何情况下，平安就所有赔偿、损失和其他行动对阁下所需负上的整体责任不会超出任何阁下可能曾就连接本网站所付出的金额。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;平安并不会就阁下连接、使用或浏览本网站、或由本网站下载任何资料、数据、文字、影像、视像或音效而对阁下的计算机设备或其他财产造成的损害或受病毒的影响而负上任何责任。
<br><br><br>
<strong>使用資料的限制</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;本網站由平安擁有和運作。除非獲得平安明確允許，否則不得將本網站或任何平安擁有、運作、許可或控制的網站所載的資料以任何方式復印、復制、出版、更改、儲存在恢復系統、用於創作衍生作品、上載、刊登、傳送(透過任何形式或透過任何渠道)、發放或在任何情況用於公眾或商業用途。閣下可以下載本網站所顯示資料供閣下使用，惟閣下必須保留資料內所有版權和其他擁有權通知。未經平安書面批準，閣下不可發放、更改、傳送、再使用、再刊登或使用本網站的內容(包括文字、影像、音效和視像)作公眾或商業用途。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;平安並不保證或聲明閣下使用顯示於本網站的資料不會侵犯第三者權利。
<br><br><br>
<strong>司法事項</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;除非在此明確說明，否則平安並未就本網址所載資料是否適合於或可供使用於任何地方作出聲明。選擇連接本網站人士是其本身采取主動進行連接，並負有責任遵守當地法律。
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;除非在此明確說明，否則本網站所載資料並不代表平安銳意推售平安所提供之任何證券、任何保險產品或其他產品或服務的銷售要約或購買建議。如果在某司法 管轄範圍下，證券、保險產品或其他產品或服務的要約或建議、購買或銷售觸犯證券法、保險法或其他法例，此等產品和服務不會在該司法範圍由平安提供，即使 由平安提供也不會生效。某些產品和服務可能不會在所有司法範圍提供。
<br><br><br>
<strong>資料擁有權</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;任何數據，除了個人資料外，其他經電子郵件或其他途徑透過本網站傳送至平安的資料，包括數據、查詢、意見或建議，會被當作非機密性和非專利的資料，並成為平安擁有的財產。這些資料可能會被用作任何用途，包括但不限於再制作、建議、公開、傳送、出版、廣播和刊登。平安可自由使用任何利用其他途徑透過本網 站傳送至平安的訊息，包括意念、概念、知識或技術用作任何用途，包括但不限於產品之開發和市場拓展。作為本部分的條款，閣下透過本網站或其他網站傳送資料(個人資料以外)至 平安，閣下將放棄所有可能適用於閣下對有關資料的權利。
<br><br><br>
<strong>知識產權</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;所有商标、服务标志、商品名称、标识和功能标志拥有权均属平安所有。除非在这些条款明确说明和在适用的法例允许下，否则未得平安的书面批准，本网站所载 任何内容均不应诠释为无论是以暗示、不容反悔法或其他形式之准予、任何特许或权利以使用平安的知识产权，包括但不限于本网站上显示的任何商标或标签。除在此网站列明可行的情况外，阁下绝对不得使用本网站上所显示的商标或卷标，或本网站上任何其他内容。
<br><br><br>
<strong>軟件使用權</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;此網站所有或提供予閣下的任何軟件，平安給予閣下非全部、有限和個人許可，並只可在個人和非商業的情況下下載和使用有關軟件。我們不賦予軟件的其他權利。所有的權利，包括軟件的知識產權屬平安的財產、相關持牌者或軟件的擁有者。除非法律允許，否則閣下不能對軟件作出機械顛倒、程序逆轉、更改或損害。
<br><br><br>
<strong>保安提示</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;平安非常重視使用本網站人士資料的安全和保密問題。雖然在公開媒介如互聯網進行商業活動時固然存在風險，我們已實行了措施以減低這些風險。為保護和保障閣下的隱私，本網站采用先進的保安系統，使用Netscape Navigator version 4.0 或 Microsoft Internet Explorer version 4.0 或更先進的版本。
<br><br><br>
<strong>受監管的法例和管轄權</strong>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;此使用條款受中華人民共和國香港特別行政區(簡稱“香港”)法律監管，而各方同意提交予香港法院作為專有管轄。
</div>
</div>
</template>
<script src="./terms.js"></script>
<style lang="scss" scoped>
@import "./terms.scss";
</style>
import Vue from 'vue'
import Router from 'vue-router'
import Index from './pages/index/index.vue'
Vue.use(Router)
/**
* 重写路由的push方法
*/
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error => error)
}
const routes = [
{
path: '/',
name: 'index',
component: Index,
meta: {
title: '平安人寿保险官网'
}
},
{
path: '/profile',
name: 'profile',
component: () => import('./pages/profile/profile.vue'),
meta: {
title: '公司简介'
}
},
{
path: '/terms',
name: 'terms',
component: () => import('./pages/terms/terms.vue'),
meta: {
title: '使用条款'
}
},
{
path: '/privacy',
name: 'privacy',
component: () => import('./pages/privacy/privacy.vue'),
meta: {
title: '隐私政策'
}
},
{
path: '/protocol',
name: 'protocol',
component: () => import('./pages/protocol/protocol.vue'),
meta: {
title: '平安壹賬通會員服務協議'
}
},
{
path: '/news/detail',
name: 'newsDetail',
component: () => import('./pages/news-detail/news-detail.vue'),
meta: {
title: ''
}
},
{
path: '/demo',
name: 'demo',
component: () => import('./pages/demo/index.vue'),
meta: {
title: ''
}
},
{
path: '/about',
name: 'about',
component: () => import('./pages/About.vue'),
meta: {
title: ''
}
},
// 404页面
{
path: '*', // * 表示上面路径匹配不到的都显示这个页面
name: '404',
component: Index
},
]
// add route path
routes.forEach(route => {
route.path = route.path || '/' + (route.name || '');
});
const router = new Router({
routes,
// mode: 'history',
});
router.beforeEach((to, from, next) => {
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
}
next();
});
export default router;
// import request from '@/service'
// export const banner = async (store, params) => {
// return await request.get('/api/v1/get_banner', { params: params })
// }
// export const categories = async (store, params) => {
// return await request.get('/japi/v1/categories', { params: params })
// }
// export const recommend = async (store, params) => {
// return await request.post('/wapi/v1/query', params)
// }
// export const entries = async (store, params) => {
// return await request.get('/tapi/v1/get_entry_by_rank', { params: params })
// }
// export const getListByLastTime = async (store, params) => {
// return await request.get('/xapi/v1/getListByLastTime', { params: params })
// }
// export const increment = ({
// commit
// }) => {
// commit('INCREMENT')
// }
// export const pcorphone = ({
// commit
// }) => {
// commit('PCORPHONE')
// }
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import * as mutations from './mutations'
import * as actions from './actions'
Vue.use(Vuex)
const store = () => new Vuex.Store({
state,
mutations,
actions
})
export default store
export function INCREMENT(state) {
state.counter++
}
export function IS_MOBILE(state, bool) {
state.isMobile = bool
}
export function IS_SMALL_SCREEN(state, bool) {
state.isSmallScreen = bool
}
export default {
counter: 2, // 例子
isMobile: false, //是否手机访问
isSmallScreen: false, // 是否小屏幕 (PC时，小屏幕机导航栏会改变))
}
/* 图片字体 */
@font-face {
font-family: 'iconfont';
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASEAAsAAAAACSAAAAQ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqFGIQnATYCJAMYCw4ABCAFhG0HVBvZBxGVnNvIfhzYDV+BAe9wtJiGONTGYuHBZ/Oh77Q3OxupItOeFFTcQjpRXwK+AIbn08ne766XppsiwRKPksQTj7AO4xAOv3fOAdsJc0KNZO3Io89Lf8K9BkY+ce+4df4Dms+yXMacNNbEAOOAAtrbF1mBxAlqy/Dq8uqwrgMBiPGAD4g6dbgGQhSseQRAKstK8iFMmFAVBMHSdsFWFpkNHhYzhbkEYJb3efIGQUQIDCaFtXQ0l1KEhOfKV+G019Ary7GgbzgHAGEXUIAPABZIZ6GrGTSI+oBia7/A4gVAioWBeq58vvHlkJeNr8INBhIyy0dwwV8esJg4MBAgfGCVlKUNj/HguZIawGrqjZgLPHg5xACK1Y2YCwy8Cpdclo4/YIMIcBLANZh9YGkIPHta2NorTKxUSlUNV7Koz2zswo0mRfNNRs9fbFq8YJr5uEXLWo7cEd+6pbl9W3v3rj4g7tzRpU+7HauR0YbmJ2+dalLELZy6ude0uGh+75Zp5iXFCxZMW2Q+0IQOKsa7SMJIKH18h3y9hWY+mN4tEtW0bYT2memWpk1db7L81tQ7dgs3isUbt1rrl0kU0yy1Sza7ZCw0m4lCIzFMF2ww15+Qp1u43sRk/hJT7YJN5uaLluolPZSTvq1m4vmbgR7veM116OjBGp2K21oMbkRGnvqglnCLVharuAM6gl+toTNYPZs5doyZDXyHbx/RSvZMt6tNtx7RlzkWlcysWQySV2I+Pio008Np8mQvL/j0CEVLLIItloiEIPIFnCBDN7ZpC6n3i/erE0uXICT/t+269rVrjx4de+wrwynfjo1BaN/tXQmzJ3wIF9krghUHqN1eFB4fMvuCROrnvVwdkUeWLff2k70IiO8fs2yOabXpHHdlvX+A5rmK6dx4piXlbHunib+iNeVM+UnXFvWZjR2uleVF/jsbK12wo8OWDpY+TRH0jP8syLs0WIlOAIDhFHOP+gIA1TF3kCOBOcbaj9FjgYCJ97CEFvwt35GfKZ2Yq4j5JiGUsAC+Juu7saSZavDK1Wgs/jeaagB/Q0WUsuYutTOdIKDlmTLhATa03MskN0+G0t1vcjyETCMMArY4CLmQiuaDSSIETSgem7dBu0/G6o2REgGeJiAQSrvAkDsKSukyiaU9Bo+Zd+BTZgwxXdZHSrjFro4ZoqKlgj+VSe4UsdaVX3iDfgeR41KP8UIuNkCBfgHpxBUd8hArGj760FgVcZkjpaLbEAJTbWYHWTeltfaNvz9X9KJNIcfBSrIMhApapMAfKSOxjnJ6V6vM+29AewuEXNFR432BrLCDk0B+AhqQrqquUceljG7woR00qhQ7i5OxiKRiBwSIMlJbPMkBqdoo7RDuNfyZblxT1WZ6TbzLfbBZ53QYQglLeIRPBBB9hPTHH9oLMhQ5r5ipDFwwMRwxRezrfzAAAA==')
format('woff2');
}
.iconfont {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconrefresh:before {
content: '\e874';
}
.iconempty:before {
content: '\e6a6';
}
.iconclose:before {
content: '\e849';
}
\ No newline at end of file
/**
* ------------------------------------------------------------------
* Sass Minxins
*
* 参考收集：
* https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins
* ------------------------------------------------------------------
*
*/
// 文字截取
@mixin text-overflow() {
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
}
@mixin word-break() {
word-break: break-all;
word-wrap: break-word;
white-space: normal;
}
// No wrap
@mixin no-wrap() {
word-break: normal;
word-wrap: normal;
white-space: nowrap;
}
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Center-align a block level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@mixin hide-text() {
font-size: 0;
line-height: 0;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
/**
* ------------------------------------------------------------------
* 支持文件
* 需要引用的地方均需要加上这个支持文件
*
* ------------------------------------------------------------------
*
*/
@import "mixins";
@import "var";
@import "utils";
// 图标字体
@import "fonticon";
// 字体引入
@import './../assets/fonts/font.scss'
.bis {
background-repeat: no-repeat;
background-size: 100% 100%;
}
//flex 布局和 子元素 对其方式
.fl {
display: flex;
}
.fj {
display: flex;
justify-content: space-between;
}
//水平和垂直居中
.fcc {
display: flex;
justify-content: center;
align-items: center;
}
// 为元素设定的宽度和高度决定了元素的边框盒。
.bb {
box-sizing: border-box;
}
// 满屏
.fullp {
width: 100%;
height: 100%;
}
/**
* ------------------------------------------------------------------
* Sass 变量
*
* ------------------------------------------------------------------
*
*/
// Margin
$marginTopSmaller: 20px;
$marginTopSmall: 30px;
$marginTopMedium: 40px;
$marginTopLarge: 60px;
$marginTopLarger: 80px;
// Padding
$paddingTopSmaller: 20px;
$paddingTopSmall: 30px;
$paddingTopMedium: 40px;
$paddingTopLarge: 60px;
$paddingTopLarger: 80px;
// Color
$colorBlue: #20A0FF;
$colorGreen: #13CE66;
$colorGray: #475669;
$colorBlack: #000;
$colorRed: #FF4949;
$colorYellow: #F7BA2A;
$color: #787878;
$colorLink: #1D8CE0;
$backGroundColor: #fff;
// Font
$fontSize: 32px;
$fontSizeSmall: 28px;
$fontSizeSmaller: 24px;
$fontSizeLarge: 36px;
$fontSizeLarger: 44px;
import Vue from 'vue'
import { on } from './dom.js'
const nodeList = []
const ctx = '@@clickoutsideContext'
!Vue.prototype.$isServer && on(document, 'click', e => {
nodeList.forEach(node => node[ctx].documentHandler(e))
})
/**
* v-clickoutside
* @desc 点击元素外面才会触发的事件
* @example
* ```vue
* <div v-element-clickoutside="handleClose">
* ```
*/
export default {
bind (el, binding, vnode) {
const id = nodeList.push(el) - 1
const documentHandler = function (e) {
if (!vnode.context ||
el.contains(e.target) ||
(vnode.context.popperElm &&
vnode.context.popperElm.contains(e.target))) return
if (binding.expression &&
el[ctx].methodName &&
vnode.context[el[ctx].methodName]) {
vnode.context[el[ctx].methodName]()
} else {
el[ctx].bindingFn && el[ctx].bindingFn()
}
}
el[ctx] = {
id,
documentHandler,
methodName: binding.expression,
bindingFn: binding.value
}
},
update (el, binding) {
el[ctx].methodName = binding.expression
el[ctx].bindingFn = binding.value
},
unbind (el) {
const len = nodeList.length
for (let i = 0; i < len; i++) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1)
break
}
}
}
}
/* eslint-disable */
/* istanbul ignore next */
import Vue from 'vue';
const isServer = Vue.prototype.$isServer;
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const ieVersion = isServer ? 0 : Number(document.documentMode);
/* istanbul ignore next */
const trim = function(string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};
/* istanbul ignore next */
const camelCase = function(name) {
return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
};
/* istanbul ignore next */
export const on = (function() {
if (!isServer && document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
/* istanbul ignore next */
export const off = (function() {
if (!isServer && document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
})();
/* istanbul ignore next */
export const once = function(el, event, fn) {
var listener = function() {
if (fn) {
fn.apply(this, arguments);
}
off(el, event, listener);
};
on(el, event, listener);
};
/* istanbul ignore next */
export function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
};
/* istanbul ignore next */
export function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
var classes = (cls || '').split(' ');
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else {
if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
}
}
}
if (!el.classList) {
el.className = curClass;
}
};
/* istanbul ignore next */
export function removeClass(el, cls) {
if (!el || !cls) return;
var classes = cls.split(' ');
var curClass = ' ' + el.className + ' ';
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else {
if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
}
if (!el.classList) {
el.className = trim(curClass);
}
};
/* istanbul ignore next */
export const getStyle = ieVersion < 9 ? function(element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'styleFloat';
}
try {
switch (styleName) {
case 'opacity':
try {
return element.filters.item('alpha').opacity / 100;
} catch (e) {
return 1.0;
}
default:
return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
}
} catch (e) {
return element.style[styleName];
}
} : function(element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
var computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
return element.style[styleName];
}
};
/* istanbul ignore next */
export function setStyle(element, styleName, value) {
if (!element || !styleName) return;
if (typeof styleName === 'object') {
for (var prop in styleName) {
if (styleName.hasOwnProperty(prop)) {
setStyle(element, prop, styleName[prop]);
}
}
} else {
styleName = camelCase(styleName);
if (styleName === 'opacity' && ieVersion < 9) {
element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
} else {
element.style[styleName] = value;
}
}
};
// 正在表达式
export const REGEXPS = {
"mobile": /^1\d{10}$/
}
// 验证手机
export function checkMobile(str) {
return REGEXPS.mobile.test(str);
}
/**
* 链接参数转换为obj
* 入参 完整链接
* @param {*} url
*/
export function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
)
}
//获取cookie、
export function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//设置cookie
export function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};
//删除cookie
export function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};
/**
* 获取环境信息
* @return {Object} 环境信息对象
*/
export function getEnv() {
var nav = window.navigator;
var env = {
"iphone": false,
"ipad": false,
"android": false,
"pc": false,
"ios": false,
"ver": "0"
};
var ua = nav.userAgent;
var android = ua.match(/(Android)\s+([\d.]+)/);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
if (ipad) {
env.ipad = ipad[1] && true || false;
env.ver = ipad[2] && ipad[2].replace(/-/g, ".") || "";
env.ios = true;
} else if (iphone) {
env.iphone = iphone[1] && true || false;
env.ver = iphone[2] && iphone[2].replace(/-/g, ".") || "";
env.ios = true;
} else if (android) {
env.android = android[1] && true || false;
env.ver = android[2];
} else {
env.pc = true;
}
return env;
}
/**
* 设定页面 title
* @param {[type]} title [description]
*/
export function setTitle(title) {
if (!title) {
return;
}
document.title = title;
// if (ENV.ios && navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
// 修复微信端IOS无法修改document.title的情况
if (getEnv().ios && (navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 || navigator.userAgent.toLowerCase().indexOf("alipay") !== -1)) {
//修复IOS微信端和支付宝无法修改document.title的情况
var $iframe = document.createElement('iframe');
$iframe.className = "C-hiddenIframe";
$iframe.src = "/" + location.pathname.split('/')[1] + "/favicon.ico";
$iframe.style.visibility = 'hidden';
$iframe.style.width = '1px';
$iframe.style.height = '1px';
$iframe.onload = function onIframeLoad() {
setTimeout(function () {
$iframe.onload = null;
onIframeLoad = null;
document.body.removeChild($iframe);
$iframe = null;
}, 0);
};
document.body.appendChild($iframe);
}
}
// 为链接添加参数
export function addQuery(url, query) {
query = query || {}
query = (function (query) {
var q = []
Object.keys(query).forEach(function (_q) {
q.push(_q + '=' + query[_q])
})
return q.join('&')
})(query)
if (url.indexOf('?') !== -1) {
url += '&' + query
} else {
url += '?' + query
}
return url
}
/**
* 获得当前页面的path
* @return {String} 页面path
*/
export function getPath() {
var path = window.location.hash;
path = path || "#/";
path = path === "#/" ? "#/index" : path;
path = path.split("?");
return path[0];
}
// 获取 url 参数
export function getQuery(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
}
/**
* 把 \n换行符转换成<br>
* 转换后需要用 v-html渲染
* 用{{}}会当成字符串把 html渲染出来
*/
export function formatBr(str) {
str = str.replace(/\n/g, '<br/>')
return str
};
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
export function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版，2 表定时器版
* 时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
*/
export function throttle(func, wait, type) {
if (type === 1) {
var previous = 0;
} else if (type === 2) {
var timeout;
}
return function () {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
} else if (type === 2) {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
import wx from 'weixin-js-sdk';
wx.ready(function () { //通过ready接口处理成功验证
// config信息验证成功后会执行ready方法
wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
title: '这里是标题', // 分享标题
desc: 'This is a test!', // 分享描述
link: '链接', // 分享链接
imgUrl: '图片', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareTimeline({ //分享朋友圈
title: '标题', // 分享标题
link: '链接',
imgUrl: '图片', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res) {//通过error接口处理失败验证
// config信息验证失败会执行error函数
});
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: '', // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
const Timestamp = new Date().getTime();
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 打包目录
let webpack_public_path = 'dist'
var path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
let plugins = [
new MiniCssExtractPlugin({
filename: `static/css/[name].${Timestamp}.css`,
chunkFilename: `static/css/[name].${Timestamp}.css`
})
];
if (process.env.NODE_ENV === 'production') {
// 生产环境
webpack_public_path = process.env.VUE_APP_TITLE
plugins.push(
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/demo', '/about'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
renderAfterDocumentEvent: 'render-event',
//renderAfterTime: 5000,
//renderAfterElementExists: 'my-app-element'
})
})
)
} else {
// 开发环境
}
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@pages', resolve('src/pages'))
.set('@api', resolve('src/api'))
.set('@styles', resolve('src/styles'))
.set('@store', resolve('src/store'))
.set('@utils', resolve('src/utils'))
},
configureWebpack: { // webpack 配置
// 修改打包后js文件名
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `static/js/[name].${Timestamp}.js`,
chunkFilename: `static/js/[name].${Timestamp}.js`
},
// 修改打包后css文件名
plugins: plugins
},
// 修改打包后img文件名
// chainWebpack: config => {
// config.module
// .rule('images')
// .use('url-loader')
// .tap(options => {
// return {
// limit: 4096,
// fallback: {
// loader: 'file-loader',
// options: {
// name: `img/[name].${Timestamp}.[ext]`
// }
// }
// };
// })
// },
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
//例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
//baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
//baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
publicPath: process.env.NODE_ENV === "dev" ? "/" : "./",
// outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
outputDir: webpack_public_path,
//用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: "assets",
//指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
// indexPath: "myIndex.html",
//默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
filenameHashing: false,
// lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
lintOnSave: true,
//如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== 'production',
//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
// runtimeCompiler: false,
/**
* 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
* 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
* map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
* 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
* */
productionSourceMap: false,
// 它支持webPack-dev-server的所有选项
// devServer: {
// host: "localhost",
// port: 9001, // 端口号
// https: false, // https:{type:Boolean}
// open: true, //配置自动启动浏览器
// // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
// }
};
\ No newline at end of file