Skip to content

3
360-views
Commit 39bfa300 authored by fusy's avatar fusy
Browse files
Options

修改文件结构、修改webpack配置、添加环境变量

parent 7120a461
Hide whitespace changes
Inline Side-by-side
Showing with 1303 additions and 1034 deletions
.eslintrc.js 0 → 100644
View file @ 39bfa300
module.exports = {
//此项是用来告诉eslint找当前配置文件不能往父级查找
root: true,
//此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
parser: "babel-eslint",
//此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
parserOptions: {
parser: "babel-eslint",
},
// 此项指定环境的全局变量，下面的配置指定为浏览器环境
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
// 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
extends: ["plugin:vue/essential", "@vue/standard"],
plugin: ["vue"],
/*
下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
"off" -> 0 关闭规则
"warn" -> 1 开启警告规则
"error" -> 2 开启错误规则
*/
rules: {
"no-tabs": "off",
},
};
.gitignore 0 → 100644
View file @ 39bfa300
node_modules
yarn.lock
package-lock.json
\ No newline at end of file
.vscode/settings.json 0 → 100644
View file @ 39bfa300
{
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
"explorer.confirmDragAndDrop": false,
"editor.detectIndentation": false,
"vetur.format.defaultFormatter.js": "none",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
babel.config.js
View file @ 39bfa300
module.exports = { module.exports = {
presets: [ presets: ["@vue/cli-plugin-babel/preset"],
'@vue/cli-plugin-babel/preset', plugins: [
], [
} "component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
config/dev.config.js 0 → 100644
View file @ 39bfa300
module.exports = {
REQUEST_URL: '"http://dev.com/"',
};
jsconfig.json 0 → 100644
View file @ 39bfa300
{
"compilerOptions": {
"baseUrl": ".",
"rootDir": ".",
"paths": {
"@/*": ["./src/*"]
},
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": ["node_modules"]
}
package.json
View file @ 39bfa300
{ {
"name": "healthy", "name": "healthy",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "cross-env NODE_ENV=development vue-cli-service serve --env",
"build": "vue-cli-service build", "build": "cross-env NODE_ENV=production vue-cli-service build --env",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.10.4", "@babel/preset-env": "^7.10.4",
"@vue/cli-plugin-babel": "~4.4.0", "@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0", "@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-pwa": "~4.4.0", "@vue/cli-plugin-pwa": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0", "@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0", "@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0", "@vue/cli-service": "~4.4.0",
"@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1", "babel-plugin-component": "^1.1.1",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"element-ui": "^2.13.2", "cross-env": "^7.0.2",
"eslint": "^6.7.2", "element-ui": "^2.13.2",
"eslint-plugin-import": "^2.20.2", "eslint": "^6.7.2",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-promise": "^4.2.1", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-standard": "^4.0.0", "eslint-plugin-promise": "^4.2.1",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-standard": "^4.0.0",
"sass": "^1.26.5", "eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2", "minimist": "^1.2.5",
"vue-template-compiler": "^2.6.11" "sass": "^1.26.5",
}, "sass-loader": "^8.0.2",
"eslintConfig": { "vue-template-compiler": "^2.6.11"
"root": true, },
"env": { "browserslist": [
"node": true "> 1%",
}, "last 2 versions",
"extends": [ "not dead"
"plugin:vue/essential", ]
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
} }
public/img/icons/safari-pinned-tab.svg deleted 100644 → 0
View file @ 7120a461
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
</svg>
src/App.vue
View file @ 39bfa300
<template> <template>
<div id="app"> <div id="app">
<div class="big-box"> <router-view></router-view>
<Head /> </div>
<Main />
</div>
</div>
</template> </template>
<style lang="scss">
#app {
width: 1920px;
margin-left: 0;
margin-right: 0;
margin: auto;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 0 3px 3px #999;
}
// #nav {
// padding: 30px;
// a {
// font-weight: bold;
// color: #2c3e50;
// &.router-link-exact-active {
// color: #42b983;
// }
// }
// }
</style>
src/__components/Content.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="content">
<!-- 使用组件完成顶部信息展示 -->
<List-head />
<!-- 中间信息展示 -->
<div class="middle">
<Title title="基本信息" :flag="false" />
<!-- 下方信息展示 -->
<div class="middle-info">
<ul class="clear">
<li v-for="(usersinfo, index) in usersinfo" :key="index">
<p>
<strong>{{ usersinfo.title }}</strong>
{{ usersinfo.content }}
</p>
<p>
<strong>{{ usersinfo.title1 }}</strong>
{{ usersinfo.content1 }}
</p>
</li>
</ul>
</div>
</div>
<!-- 底部信息展示 -->
<div class="bottom">
<!-- 头部标题 -->
<Title title="出生医学证明" :flag="false" />
<!-- 下方信息展示 -->
<div class="bottom-info">
<!-- 个人信息 -->
<div class="info-top">
<div class="images">
<img src="../assets/users.png" alt />
</div>
<ul class="clear">
<li v-for="(item, i) in users" :key="i">
<p>
<strong>{{ item.title }}</strong>
{{ item.content }}
</p>
<p>
<strong>{{ item.title1 }}</strong>
{{ item.content1 }}
</p>
<p>
<strong>{{ item.title2 }}</strong>
{{ item.content2 }}
</p>
<p>
<strong>{{ item.title3 }}</strong>
{{ item.content3 }}
</p>
</li>
</ul>
</div>
<!-- 母亲信息 -->
<div class="info-middle">
<div class="images">
<img src="../assets/mother.png" alt />
</div>
<ul class="clear">
<li v-for="(item, i) in mother" :key="i">
<p>
<strong>{{ item.title }}</strong>
{{ item.content }}
</p>
<p>
<strong>{{ item.title1 }}</strong>
{{ item.content1 }}
</p>
</li>
</ul>
</div>
<!-- 父亲信息 -->
<div class="info-bottom">
<div class="images">
<img src="../assets/father.png" alt />
</div>
<ul class="clear">
<li v-for="(item, i) in father" :key="i">
<p>
<strong>{{ item.title }}</strong>
{{ item.content }}
</p>
<p>
<strong>{{ item.title1 }}</strong>
{{ item.content1 }}
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
usersinfo: [
{
title: "健康档案编号;",
content: "4278452212124800",
title1: "联系人:",
content1: "韩和",
},
{
title: "出生日期:",
content: "2015年1月1日",
title1: "联系电话:",
content1: "18754215546",
},
{
title: "民族:",
content: "汉族",
title1: "家庭住址:",
content1: "湖北省宜昌市枝江市当阳长坂坡",
},
],
users: [
{
title: "出生医学证明编号:",
content: "4278452212124800",
title1: "出生身长:",
content1: "80cm",
title2: "接生人员姓名:",
content2: "胡佑硕",
title3: "签发日期:",
content3: "中国",
},
{
title: "出生地址:",
content: "湖北省宜昌市枝江市当阳长坂坡",
title1: "出生体重:",
content1: "1.8kg",
title2: "签发机构名称:",
content2: "宜昌市枝江市当阳",
title3: "领证人员姓名:",
content3: "刘长红",
},
{
title: "出生孕周:",
content: "40周",
title1: "接生医疗机构名称:",
content1: "宜昌市枝江市妇幼医院",
title2: "签发人员姓名:",
content2: "陈晨",
},
],
mother: [
{
title: "母亲姓名:",
content: "韩和",
title1: "母亲民族:",
content1: "中国",
},
{
title: "母亲出生日期:",
content: "1985.07.6",
title1: "母亲身份证号码:",
content1: "4278452212124800",
},
{
title: "母亲国籍:",
content: "中国",
title1: "母亲地址:",
content1: "湖北省宜昌市枝江市当阳长坂坡",
},
],
father: [
{
title: "父亲姓名:",
content: "韩呵呵",
title1: "父亲民族:",
content1: "中国",
},
{
title: "父亲出生日期:",
content: "1985.07.6",
title1: "父亲身份证号码:",
content1: "4278452212124800",
},
{
title: "父亲国籍:",
content: "中国",
title1: "父亲地址:",
content1: "湖北省宜昌市枝江市当阳长坂坡",
},
],
};
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.middle {
margin-left: 40px;
height: 228px;
width: 95%;
background-color: #fff;
margin-top: 30px;
.title {
border-bottom: 1px solid #ecf2f7;
}
span {
width: 12px;
height: 12px;
display: inline-block;
background: rgba(57, 203, 254, 1);
border-radius: 50%;
margin-top: 33px;
margin-left: 31px;
margin-right: 17px;
}
h3 {
display: inline-block;
color: #7895ff;
font-size: 20px;
margin-top: 26px;
padding-bottom: 28px;
}
ul {
margin-top: 10px;
li {
float: left;
width: 28%;
margin-left: 4%;
font-size: 16px;
p {
line-height: 73px;
color: #5d6884;
strong {
color: #303951;
margin-right: 10px;
}
}
}
}
}
.bottom {
margin-left: 40px;
height: 580px;
width: 95%;
background-color: #fff;
margin-top: 30px;
margin-bottom: 30px;
.info-top,
.info-middle,
.info-bottom {
// height: 222px;
width: 1559px;
margin-left: 35px;
margin-top: 40px;
border-bottom: 1px solid #ecf2f7;
// background-color: red;
.images {
float: left;
img {
width: 58px;
height: 58px;
}
}
ul li {
float: left;
width: 30%;
margin-left: 2%;
p {
margin-bottom: 21px;
color: #5d6884;
font-size: 16px;
strong {
color: #303951;
margin-right: 10px;
}
}
}
}
}
</style>
src/__components/Event.vue 0 → 100644
View file @ 39bfa300
<template>
<div>
<List-head />
<!-- 计划免疫接种情况展示 -->
<div class="showPlan">
<!-- 头部标题 -->
<Title title="计划免疫接种情况" />
</div>
</div>
</template>
<style lang="scss" scoped>
.showPlan {
width: 95%;
height: 900px;
background-color: #fff;
margin-top: 31px;
margin-left: 40px;
margin-bottom: 36px;
}
</style>
src/__components/Head.vue 0 → 100644
View file @ 39bfa300
<template>
<!-- 头部显示 -->
<header class="both">
<div class="logo clear">
<h1>
<img src="../assets/logo.png" alt="" />
</h1>
</div>
<div class="nav clear">
<ul class="clear">
<li v-for="(item, i) in header" :key="i">
<span></span>
<div class="content">
<p>{{ item.title }}</p>
<p>{{ item.cycle }}</p>
</div>
</li>
</ul>
</div>
</header>
</template>
<script>
export default {
data() {
return {
header: [
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
{ title: "婴儿期", cycle: "0-1岁" },
],
};
},
mounted() {
console.log(this.header);
},
};
</script>
<style lang="scss" scoped>
header {
// background-color: red;
.logo {
float: left;
h1 {
height: 100px;
img {
width: 120px;
height: 54px;
margin-left: 31px;
margin-top: 27px;
}
}
}
}
.nav {
ul li {
float: right;
width: 200px;
height: 100px;
text-align: center;
line-height: 50px;
}
}
</style>
src/__components/ListHead.vue 0 → 100644
View file @ 39bfa300
<template>
<div>
<!-- 顶部信息展示 -->
<div class="top">
<!-- 顶部左侧信息展示 -->
<div class="left clear">
<div class="avater">
<img src="../assets/logo.png" alt />
</div>
<div class="information">
<h2>赵子龙</h2>
<div class="info">
<span class="info-left">
<i class="el-icon-eleme"></i>男
</span>
<span class="info-right">
<i class="el-icon-eleme"></i>2015.01.01
</span>
</div>
<p class="card">
<i class="el-icon-eleme"></i>4201**************52
</p>
</div>
</div>
<!-- 顶部右侧信息展示 -->
<div class="right clear">
<div class="step">
<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(list, i) in list"
:key="i"
>
<div class="show-list">
<p>{{ list.title }}</p>
<p>
<img src="../assets/door.png" alt="" />
</p>
<h4>{{ list.tag }}</h4>
<p>{{ list.time }}</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
data() {
return {
list: [
{
title: "枝江市妇幼",
img: "../assets/door.png",
tag: "门诊",
time: "2015.01.01",
},
{
title: "枝江市妇幼",
img: "../assets/door.png",
tag: "门诊",
time: "2015.01.02",
},
{
title: "枝江市妇幼",
img: "../assets/door.png",
tag: "门诊",
time: "2015.01.03",
},
{
title: "枝江市妇幼",
img: "../assets/door.png",
tag: "门诊",
time: "2015.01.04",
},
{
title: "枝江市妇幼",
img: "../assets/door.png",
tag: "门诊",
time: "2015.01.05",
},
],
};
},
mounted() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView: 5,
loop: true,
observer: true,
observeParents: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
},
updata() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView: 5,
// loop: true,
observer: true,
observeParents: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
},
};
</script>
<style lang="scss" scoped>
.top {
.left {
width: 22%;
height: 176px;
margin-top: 40px;
margin-left: 40px;
background-color: #fff;
float: left;
.avater {
float: left;
img {
width: 98px;
height: 98px;
margin-top: 40px;
margin-left: 30px;
border-radius: 50%;
}
}
.information {
display: inline-block;
margin-left: 20px;
margin-top: 40px;
h2 {
font-weight: bold;
font-size: 2px;
}
.info {
margin-top: 23px;
font-size: 14px;
i {
margin-right: 9px;
color: #abcdef;
}
.info-right {
margin-left: 23px;
}
}
.card {
margin-top: 6px;
i {
margin-right: 9px;
color: #abcdef;
}
}
}
}
.step {
width: 71%;
background-color: #fff;
height: 176px;
float: left;
margin-top: 40px;
margin-left: 30px;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
height: 176px;
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
text-align: center;
height: 100%;
position: relative;
p {
margin-top: 14px;
color: #5d6884;
}
h4 {
margin-top: 14px;
}
}
}
}
</style>
src/__components/Main.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="both">
<el-tabs :tab-position="tabPosition" style="height: 100%;">
<el-tab-pane label="人口学基本特征">
<span slot="label"
><i><img src="../assets/icon1.png" alt="" /></i>
人口学基本特征</span
>
<Content />
</el-tab-pane>
<el-tab-pane label="主要事件">
<span slot="label"
><i><img src="../assets/icon2.png" alt="" /></i>
主要事件</span
>
<Event />
</el-tab-pane>
<el-tab-pane label="主要健康问题">
<span slot="label"
><i><img src="../assets/icon3.png" alt="" /></i>
主要健康问题</span
>
<Question />
</el-tab-pane>
<el-tab-pane label="疾病管理">
<span slot="label"
><i><img src="../assets/icon4.png" alt="" /></i>
疾病管理</span
>
<Yiqing />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
tabPosition: "left",
};
},
};
</script>
<style lang="scss">
.both .el-tabs__item.is-active {
background: linear-gradient(
90deg,
rgba(57, 203, 254, 1) 0%,
rgba(124, 152, 255, 1) 100%
);
color: #fff;
}
.el-tabs__content {
overflow: hidden;
position: relative;
background-color: #f3f8fb;
// height:1114px;
}
.both .el-tabs--left .el-tabs__item.is-left {
text-align: left;
i {
img {
margin-top: 10px;
}
}
}
.el-tabs__item {
line-height: 60px;
color: #37425e;
}
.both .el-tabs--left .el-tabs__header.is-left {
float: left;
margin: 0;
}
</style>
src/__components/Question.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="question">
<List-head />
<div class="main">
<div class="show-question" v-for="(content, i) in content" :key="i">
<Title :title="content.title" :flag="true" :show="true" />
<div class="content">
<p>{{ content.content }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: [
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
{
title: "出生情况",
content:
"本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.show-question {
background-color: #fff;
margin-left: 40px;
margin-top: 30px;
width: 95%;
}
.content {
overflow: hidden;
p {
margin-top: 36px;
margin-bottom: 27px;
margin-left: 60px;
line-height: 28px;
font-size: 16px;
color: #5d6884;
}
}
.main {
margin-bottom: 30px;
}
</style>
src/__components/Title.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="title">
<span></span>
<h3>{{ title }}</h3>
<div class="tag" :v-if="flag">
<i v-if="show" class="el-icon-caret-top"></i>
<i v-if="!show" class="el-icon-caret-bottom"></i>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
},
show: {
type: Boolean,
},
flag: {
type: Boolean,
},
},
};
</script>
<style lang="scss" scoped>
.title {
border-bottom: 1px solid #ecf2f7;
}
span {
width: 12px;
height: 12px;
display: inline-block;
background: rgba(57, 203, 254, 1);
border-radius: 50%;
margin-top: 33px;
margin-left: 31px;
margin-right: 17px;
}
h3 {
display: inline-block;
color: #7895ff;
font-size: 20px;
margin-top: 26px;
padding-bottom: 28px;
}
i {
float: right;
margin-top: 34px;
margin-right: 31px;
color: #39cbfe;
}
.tag {
display: inline;
}
</style>
src/__components/Yiqing.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="yiqing">
<List-head />
<!-- 出生缺陷栏 -->
<div class="start">
<Title title="出生缺陷" :flag="true" :show="true" />
<div class="content">
<p>
本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。
</p>
</div>
</div>
<div class="child">
<Title title="新生儿疾病" :flag="true" :show="true" />
<div class="content">
<p>
本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。
</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.start {
width: 95%;
// height: 172px;
background-color: #fff;
margin-left: 40px;
margin-top: 30px;
}
.child {
width: 95%;
// height: 190px;
background-color: #fff;
margin-left: 40px;
margin-top: 30px;
margin-bottom: 342px;
}
.content {
overflow: hidden;
p {
width: 95%;
margin-top: 36px;
margin-bottom: 27px;
margin-left: 60px;
line-height: 28px;
font-size: 16px;
color: #5d6884;
}
}
</style>
src/components/CollapseCard.vue 0 → 100644
View file @ 39bfa300
<template>
<el-card :bodyStyle="bodyStyle" :class="{ collapsed: collapseState }">
<div slot="header" class="header-wrap">
<div class="circle-wrap"><span class="circle" />{{ header }}</div>
<div
v-if="showCollapseButton"
class="caret-wrap"
@click="onCollapse"
>
<i class="el-icon-caret-top"></i>
</div>
</div>
<div class="body">
<slot></slot>
</div>
</el-card>
</template>
<script>
import { Card } from "element-ui";
export default {
name: "CollapseCard",
components: {
"el-card": Card,
},
props: {
header: {
type: String,
},
shadow: {
type: String,
},
showCollapseButton: {
type: Boolean,
default: false,
},
collapsed: {
type: Boolean,
default: false,
},
},
data: function() {
return {
collapseState: false,
bodyStyle: { padding: 0 },
};
},
mounted() {
this.collapseState = this.collapsed;
},
methods: {
onCollapse: async function() {
this.collapseState = !this.collapseState;
await this.$nextTick();
this.$emit("onCollapse", this.collapseState);
},
},
};
</script>
<style lang="scss" scoped>
.body {
padding: 20px 30px 20px 52px;
transition: all 0.1s linear;
font-size: 12px;
color: rgba(93, 104, 132, 1);
line-height: 28px;
letter-spacing: 1px;
overflow: hidden;
}
.circle-wrap {
display: flex;
align-items: center;
font-size: 14px;
color: #7c98ff;
font-weight: bold;
line-height: 30px;
.circle {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #39cbfe;
margin: 0 10px;
}
}
.collapsed .body {
padding: 0 30px 0 52px;
height: 0;
}
.collapsed .el-icon-caret-top {
transform: rotate(180deg);
}
.header-wrap {
display: flex;
justify-content: space-between;
}
.el-icon-caret-top {
color: #39cbfe;
font-size: 25px;
vertical-align: middle;
transition: all 0.1s linear;
}
</style>
src/components/Content.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div class="content">
<!-- 使用组件完成顶部信息展示 -->
<List-head/>
<!-- 中间信息展示 -->
<div class="middle">
<Title title="基本信息" :flag="false" />
<!-- 下方信息展示 -->
<div class="middle-info">
<ul class="clear">
<li v-for="(usersinfo,index) in usersinfo" :key="index">
<p>
<strong>{{usersinfo.title}}</strong>
{{usersinfo.content}}
</p>
<p>
<strong>{{usersinfo.title1}}</strong>
{{usersinfo.content1}}
</p>
</li>
</ul>
</div>
</div>
<!-- 底部信息展示 -->
<div class="bottom">
<!-- 头部标题 -->
<Title title="出生医学证明" :flag="false" />
<!-- 下方信息展示 -->
<div class="bottom-info">
<!-- 个人信息 -->
<div class="info-top">
<div class="images">
<img src="../assets/users.png" alt />
</div>
<ul class="clear">
<li v-for="(item,i) in users" :key="i">
<p>
<strong>{{item.title}}</strong>
{{item.content}}
</p>
<p>
<strong>{{item.title1}}</strong>
{{item.content1}}
</p>
<p>
<strong>{{item.title2}}</strong>
{{item.content2}}
</p>
<p>
<strong>{{item.title3}}</strong>
{{item.content3}}
</p>
</li>
</ul>
</div>
<!-- 母亲信息 -->
<div class="info-middle">
<div class="images">
<img src="../assets/mother.png" alt />
</div>
<ul class="clear">
<li v-for="(item,i) in mother" :key="i">
<p>
<strong>{{item.title}}</strong>
{{item.content}}
</p>
<p>
<strong>{{item.title1}}</strong>
{{item.content1}}
</p>
</li>
</ul>
</div>
<!-- 父亲信息 -->
<div class="info-bottom">
<div class="images">
<img src="../assets/father.png" alt />
</div>
<ul class="clear">
<li v-for="(item,i) in father" :key="i">
<p>
<strong>{{item.title}}</strong>
{{item.content}}
</p>
<p>
<strong>{{item.title1}}</strong>
{{item.content1}}
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
usersinfo: [
{
title: '健康档案编号;',
content: '4278452212124800',
title1: '联系人:',
content1: '韩和'
},
{
title: '出生日期:',
content: '2015年1月1日',
title1: '联系电话:',
content1: '18754215546'
},
{
title: '民族:',
content: '汉族',
title1: '家庭住址:',
content1: '湖北省宜昌市枝江市当阳长坂坡'
}
],
users: [
{
title: '出生医学证明编号:',
content: '4278452212124800',
title1: '出生身长:',
content1: '80cm',
title2: '接生人员姓名:',
content2: '胡佑硕',
title3: '签发日期:',
content3: '中国'
},
{
title: '出生地址:',
content: '湖北省宜昌市枝江市当阳长坂坡',
title1: '出生体重:',
content1: '1.8kg',
title2: '签发机构名称:',
content2: '宜昌市枝江市当阳',
title3: '领证人员姓名:',
content3: '刘长红'
},
{
title: '出生孕周:',
content: '40周',
title1: '接生医疗机构名称:',
content1: '宜昌市枝江市妇幼医院',
title2: '签发人员姓名:',
content2: '陈晨'
}
],
mother: [
{
title: '母亲姓名:',
content: '韩和',
title1: '母亲民族:',
content1: '中国'
},
{
title: '母亲出生日期:',
content: '1985.07.6',
title1: '母亲身份证号码:',
content1: '4278452212124800'
},
{
title: '母亲国籍:',
content: '中国',
title1: '母亲地址:',
content1: '湖北省宜昌市枝江市当阳长坂坡'
}
],
father: [
{
title: '父亲姓名:',
content: '韩呵呵',
title1: '父亲民族:',
content1: '中国'
},
{
title: '父亲出生日期:',
content: '1985.07.6',
title1: '父亲身份证号码:',
content1: '4278452212124800'
},
{
title: '父亲国籍:',
content: '中国',
title1: '父亲地址:',
content1: '湖北省宜昌市枝江市当阳长坂坡'
}
]
}
},
mounted () {}
}
</script>
<style lang="scss" scoped>
.middle {
margin-left: 40px;
height: 228px;
width: 95%;
background-color: #fff;
margin-top: 30px;
.title {
border-bottom: 1px solid #ecf2f7;
}
span {
width: 12px;
height: 12px;
display: inline-block;
background: rgba(57, 203, 254, 1);
border-radius: 50%;
margin-top: 33px;
margin-left: 31px;
margin-right: 17px;
}
h3 {
display: inline-block;
color: #7895ff;
font-size: 20px;
margin-top: 26px;
padding-bottom: 28px;
}
ul {
margin-top: 10px;
li {
float: left;
width: 28%;
margin-left: 4%;
font-size: 16px;
p {
line-height: 73px;
color: #5d6884;
strong {
color: #303951;
margin-right: 10px;
}
}
}
}
}
.bottom {
margin-left: 40px;
height: 580px;
width: 95%;
background-color: #fff;
margin-top: 30px;
margin-bottom: 30px;
.info-top,
.info-middle,
.info-bottom {
// height: 222px;
width: 1559px;
margin-left: 35px;
margin-top: 40px;
border-bottom: 1px solid #ecf2f7;
// background-color: red;
.images {
float: left;
img {
width: 58px;
height: 58px;
}
}
ul li {
float: left;
width: 30%;
margin-left: 2%;
p {
margin-bottom: 21px;
color: #5d6884;
font-size: 16px;
strong {
color: #303951;
margin-right: 10px;
}
}
}
}
}
</style>
src/components/Event.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div>
<List-head/>
<!-- 计划免疫接种情况展示 -->
<div class="showPlan">
<!-- 头部标题 -->
<Title title="计划免疫接种情况" />
</div>
</div>
</template>
<style lang="scss" scoped>
.showPlan{
width: 95%;
height: 900px;
background-color: #fff;
margin-top: 31px;
margin-left: 40px;
margin-bottom: 36px;
}
</style>
\ No newline at end of file
src/components/Head.vue deleted 100644 → 0
View file @ 7120a461
<template>
<!-- 头部显示 -->
<header class="both">
<div class="logo clear">
<h1>
<img src="../assets/logo.png" alt="">
</h1>
</div>
<div class="nav clear">
<ul class="clear">
<li v-for="(item,i) in header" :key="i">
<span></span>
<div class="content">
<p>{{item.title}}</p>
<p>{{item.cycle}}</p>
</div>
</li>
</ul>
</div>
</header>
</template>
<script>
export default {
data (){
return {
header:[
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'},
{title:'婴儿期',cycle:'0-1岁'}
]
}
},
mounted(){
console.log(this.header)
}
}
</script>
<style lang="scss" scoped>
header{
// background-color: red;
.logo{
float: left;
h1{
height: 100px;
img{
width: 120px;
height: 54px;
margin-left: 31px;
margin-top: 27px;
}
}
}
}
.nav{
ul li{
float: right;
width: 200px;
height: 100px;
text-align: center;
line-height: 50px;
}
}
</style>
src/components/ListHead.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div>
<!-- 顶部信息展示 -->
<div class="top">
<!-- 顶部左侧信息展示 -->
<div class="left clear">
<div class="avater">
<img src="../assets/logo.png" alt />
</div>
<div class="information">
<h2>赵子龙</h2>
<div class="info">
<span class="info-left">
<i class="el-icon-eleme"></i>男
</span>
<span class="info-right">
<i class="el-icon-eleme"></i>2015.01.01
</span>
</div>
<p class="card">
<i class="el-icon-eleme"></i>4201**************52
</p>
</div>
</div>
<!-- 顶部右侧信息展示 -->
<div class="right clear">
<div class="step">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(list,i) in list" :key='i'>
<div class="show-list">
<p>{{list.title}}</p>
<p>
<img src="../assets/door.png" alt="">
</p>
<h4>{{list.tag}}</h4>
<p>{{list.time}}</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
data() {
return {
list:[
{title:'枝江市妇幼',img:'../assets/door.png',tag:'门诊',time:'2015.01.01'},
{title:'枝江市妇幼',img:'../assets/door.png',tag:'门诊',time:'2015.01.02'},
{title:'枝江市妇幼',img:'../assets/door.png',tag:'门诊',time:'2015.01.03'},
{title:'枝江市妇幼',img:'../assets/door.png',tag:'门诊',time:'2015.01.04'},
{title:'枝江市妇幼',img:'../assets/door.png',tag:'门诊',time:'2015.01.05'},
]
};
},
mounted() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView : 5,
loop: true,
observer: true,
observeParents: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
},
updata() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView : 5,
// loop: true,
observer: true,
observeParents: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
},
};
</script>
<style lang="scss" scoped>
.top {
.left {
width: 22%;
height: 176px;
margin-top: 40px;
margin-left: 40px;
background-color: #fff;
float: left;
.avater {
float: left;
img {
width: 98px;
height: 98px;
margin-top: 40px;
margin-left: 30px;
border-radius: 50%;
}
}
.information {
display: inline-block;
margin-left: 20px;
margin-top: 40px;
h2 {
font-weight: bold;
font-size: 2px;
}
.info {
margin-top: 23px;
font-size: 14px;
i {
margin-right: 9px;
color: #abcdef;
}
.info-right {
margin-left: 23px;
}
}
.card {
margin-top: 6px;
i {
margin-right: 9px;
color: #abcdef;
}
}
}
}
.step {
width: 71%;
background-color: #fff;
height: 176px;
float: left;
margin-top: 40px;
margin-left: 30px;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
height: 176px;
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
text-align: center;
height: 100%;
position: relative;
p{
margin-top: 14px;
color: #5D6884;
}
h4{
margin-top: 14px;
}
}
}
}
</style>
src/components/Main.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div class="both">
<el-tabs :tab-position="tabPosition" style="height:100%">
<el-tab-pane label="人口学基本特征">
<span slot="label"><i><img src="../assets/icon1.png" alt=""></i> 人口学基本特征</span>
<Content/>
</el-tab-pane>
<el-tab-pane label="主要事件">
<span slot="label"><i><img src="../assets/icon2.png" alt=""></i> 主要事件</span>
<Event/>
</el-tab-pane>
<el-tab-pane label="主要健康问题">
<span slot="label"><i><img src="../assets/icon3.png" alt=""></i> 主要健康问题</span>
<Question/>
</el-tab-pane>
<el-tab-pane label="疾病管理">
<span slot="label"><i><img src="../assets/icon4.png" alt=""></i> 疾病管理</span>
<Yiqing/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data () {
return {
tabPosition: 'left'
}
}
}
</script>
<style lang="scss">
.both .el-tabs__item.is-active {
background: linear-gradient(
90deg,
rgba(57, 203, 254, 1) 0%,
rgba(124, 152, 255, 1) 100%
);
color: #fff;
}
.el-tabs__content {
overflow: hidden;
position: relative;
background-color: #f3f8fb;
// height:1114px;
}
.both .el-tabs--left .el-tabs__item.is-left {
text-align: left;
i{
img{
margin-top: 10px;
}
}
}
.el-tabs__item {
line-height: 60px;
color: #37425e;
}
.both .el-tabs--left .el-tabs__header.is-left {
float: left;
margin: 0;
}
</style>
src/components/Question.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div class="question">
<List-head/>
<div class="main">
<div class="show-question" v-for="( content , i ) in content" :key="i">
<Title :title="content.title" :flag="true" :show="true" />
<div class="content">
<p>{{ content.content }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
content: [
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
},
{
title: '出生情况',
content:
'本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.show-question {
background-color: #fff;
margin-left: 40px;
margin-top: 30px;
width:95%;
}
.content {
overflow: hidden;
p {
margin-top: 36px;
margin-bottom: 27px;
margin-left: 60px;
line-height: 28px;
font-size: 16px;
color: #5D6884;
}
}
.main {
margin-bottom: 30px;
}
</style>
src/components/Title.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div class="title">
<span></span>
<h3>{{title}}</h3>
<div class="tag" :v-if="flag">
<i v-if="show" class="el-icon-caret-top" ></i>
<i v-if="!show" class="el-icon-caret-bottom"></i>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String
},
show: {
type: Boolean
},
flag: {
type: Boolean
},
},
};
</script>
<style lang="scss" scoped>
.title {
border-bottom: 1px solid #ecf2f7;
}
span {
width: 12px;
height: 12px;
display: inline-block;
background: rgba(57, 203, 254, 1);
border-radius: 50%;
margin-top: 33px;
margin-left: 31px;
margin-right: 17px;
}
h3 {
display: inline-block;
color: #7895ff;
font-size: 20px;
margin-top: 26px;
padding-bottom: 28px;
}
i {
float: right;
margin-top: 34px;
margin-right: 31px;
color: #39cbfe;
}
.tag{
display: inline;
}
</style>
\ No newline at end of file
src/components/Yiqing.vue deleted 100644 → 0
View file @ 7120a461
<template>
<div class="yiqing">
<List-head/>
<!-- 出生缺陷栏 -->
<div class="start">
<Title title="出生缺陷" :flag="true" :show="true" />
<div class="content">
<p>本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。</p>
</div>
</div>
<div class="child">
<Title title="新生儿疾病" :flag="true" :show="true" />
<div class="content">
<p>本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.start{
width: 95%;
// height: 172px;
background-color: #fff;
margin-left: 40px;
margin-top: 30px;
}
.child{
width: 95%;
// height: 190px;
background-color: #fff;
margin-left: 40px;
margin-top: 30px;
margin-bottom: 342px;
}
.content{
overflow: hidden;
p{
width: 95%;
margin-top: 36px;
margin-bottom: 27px;
margin-left: 60px;
line-height: 28px;
font-size: 16px;
color: #5D6884;
}
}
</style>
\ No newline at end of file
src/main.js
View file @ 39bfa300
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import './registerServiceWorker' import "./registerServiceWorker";
import router from './router' import router from "./router";
import store from './store'　 import store from "./store";
// 全局的样式文件硬如 // 全局的样式文件硬如
import './styles/index.scss' import "./styles/index.scss";
import './utils' import "./utils";
// 引入element-ui的按需加载文件 // 引入element-ui的按需加载文件
import './utils/element.js' import "./utils/element.js";
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
src/router/index.js
View file @ 39bfa300
import Vue from 'vue' import Vue from "vue";
import VueRouter from 'vue-router' import VueRouter from "vue-router";
// import Home from '../views/Home.vue'
Vue.use(VueRouter) Vue.use(VueRouter);
const routes = [ const routes = [
// { {
// path: '/', path: "/",
// name: 'Home', redirect: "/main",
// component: Home },
// }, {
// { path: "/main",
// path: '/about', component: () =>
// name: 'About', import(/* webpackChunkName: "main" */ "../views/Main.vue"),
// // route level code-splitting children: [
// // this generates a separate chunk (about.[hash].js) for this route {
// // which is lazy-loaded when the route is visited. path: "home",
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') component: () =>
// } import(/* webpackChunkName: "home" */ "../views/Home.vue"),
] },
],
},
];
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', routes,
base: process.env.BASE_URL, });
routes
})
export default router export default router;
src/store/index.js
View file @ 39bfa300
import Vue from 'vue' import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
Vue.use(Vuex) Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { modules: {},
}, });
mutations: {
},
actions: {
},
modules: {
}
})
src/styles/common.scss
View file @ 39bfa300
@charset "utf-8"; @charset "utf-8";
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
body{ body {
font:12px/24px "微软雅黑","宋体",Arial; font: 12px/24px "微软雅黑", "宋体", Arial;
color: #333; color: #333;
} }
a{ a {
text-decoration: none; text-decoration: none;
color: inherit;/*继承*/ color: inherit; /*继承*/
} }
li{ li {
list-style: none; list-style: none;
} }
img{ img {
vertical-align: top; vertical-align: top;
border:0; border: 0;
} }
a:hover{ a:hover {
color: red; color: red;
} }
input:focus,textarea:focus,select:focus{ input:focus,
outline:none; textarea:focus,
select:focus {
outline: none;
} }
input[type="submit"],input[type="button"],input[type="reset"]{ input[type="submit"],
input[type="button"],
input[type="reset"] {
cursor: pointer; cursor: pointer;
} }
input{ input {
padding: 0; padding: 0;
border: 0; border: 0;
color: inherit; color: inherit;
font-family: inherit; font-family: inherit;
font-size:inherit; font-size: inherit;
} }
textarea{ textarea {
resize:none; resize: none;
} }
.sl {
.sl{
white-space: nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
} }
.clear:after{ .clear:after {
content:""; content: "";
display: block; display: block;
clear: both; clear: both;
height:0; height: 0;
overflow:hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
.clear{ .clear {
zoom: 1; zoom: 1;
} }
.both{ .both {
width: 1920px; width: 1920px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
src/utils/element.js
View file @ 39bfa300
import Vue from 'vue' import Vue from "vue";
// 按需加载element-ui // 按需加载element-ui
import { Button, Tabs, TabPane, Steps, Step } from 'element-ui' import { Button, Tabs, TabPane, Steps, Step } from "element-ui";
Vue.use(Button).use(Tabs).use(TabPane).use(Step).use(Steps) Vue.use(Button)
.use(Tabs)
.use(TabPane)
.use(Step)
.use(Steps);
src/utils/index.js
View file @ 39bfa300
import Vue from 'vue'; /**
import Head from '@/components/Head.vue'; * async await 处理方法，处理数据（异常）后，返回对象；避免使用try catch；
import Main from '@/components/Main.vue'; * @param PromiseFn: Promise<any>;
import Content from '@/components/Content.vue'; * @returns Promise<{data, error}>
import ListHead from '@/components/ListHead.vue'; */
import Event from '@/components/Event.vue'; export function awaitTo(PromiseFn) {
import Title from '@/components/Title.vue'; return PromiseFn.then((data) => ({ data })).catch((error) => ({ error }));
import Question from '@/components/Question.vue'; }
import Yiqing from '@/components/Yiqing.vue';
Vue.component('Head',Head)
Vue.component('Main',Main)
Vue.component('Content',Content)
Vue.component('ListHead',ListHead)
Vue.component('Event',Event)
Vue.component('Title',Title)
Vue.component('Question',Question)
Vue.component('Yiqing',Yiqing)
\ No newline at end of file
src/utils/request.js 0 → 100644
View file @ 39bfa300
/**
* @description 公共请求方法
*/
import axios from "axios";
/**
* @description 检查业务错误码
* @param response
*/
export function checkCode(response) {
const { data } = response;
if (data && data.code !== 0) {
const e = new Error(data.msg);
e.code = data.code;
e.msg = data.msg;
throw e;
}
return response.data;
}
export function disposeError(error) {
const { code, msg } = error;
if (msg) {
//TODO: 错误码处理，暂时未知有哪些错误码
console.log(msg, code);
throw error;
}
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
if (!error.responses) {
//TODO: 错误码处理，暂时未知有哪些错误码
console.log("Error", error.message);
}
}
export default function request(url, params, options) {
const _url = process.env.BASE_URL + url;
const combineOptions = {
method: "post", // 默认post请求
data: params,
headers: {
token: "",
},
timeout: 10000, // 10秒超时
withCredentials: true, //附带cookie
...options,
};
axios(_url, combineOptions)
.then(checkCode)
.catch(disposeError);
}
src/views/Home.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="home">
<collapse-card header="出生缺陷" :showCollapseButton="true">
本人XXX出生日期为:阳历19XX年X月X日，转换为阴历时间为19XX年X月X日。干部档案中最早材料《XXXXX》中记载的出生日期为阴历时间。
</collapse-card>
</div>
</template>
<script>
import CollapseCard from "@/components/CollapseCard";
export default {
components: {
"collapse-card": CollapseCard,
},
mounted: function() {
console.log(process.env.REQUEST_URL);
},
};
</script>
src/views/Main.vue 0 → 100644
View file @ 39bfa300
<template>
<div class="main">
main
<router-view></router-view>
</div>
</template>
<script>
export default {
data: function() {
return {};
},
methods: {},
};
</script>
vue.config.js
View file @ 39bfa300
var path = require("path");
const webpack = require("webpack");
const minimist = require("minimist");
const args = minimist(process.argv.slice(2));
let env = "dev";
switch (args.env) {
case "sit":
env = "sit";
break;
case "uat":
env = "uat";
break;
case "pro":
env = "pro";
break;
default:
env = "dev";
break;
}
module.exports = { module.exports = {
lintOnSave:false , // 处理ESLint 的 error 提示 lintOnSave: false, // 处理ESLint 的 error 提示
devServer:{ devServer: {
host:"localhost", // 0.0.0.0 host: "localhost", // 0.0.0.0
port:8080, port: 8080,
open:true, // 自动打开浏览器 open: true, // 自动打开浏览器
inline:true, inline: true,
// proxy:{ // 反向代理 // proxy:{ // 反向代理
// } // }
}, },
publicPath:".", // 项目上线打包 打包启用 publicPath: ".", // 项目上线打包 打包启用
} configureWebpack: {
\ No newline at end of file resolve: {
alias: {
// 别名
vue$: "vue/dist/vue.esm.js",
"@": path.resolve(__dirname, "./src"),
},
},
plugins: [
new webpack.DefinePlugin({
"process.env": require(`./config/${env}.config`),
}),
],
},
};
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