update style

This commit is contained in:
LittleBoy 2019-06-18 13:00:48 +08:00
parent a6a5b85570
commit bc643cf845
9 changed files with 151 additions and 1255 deletions

View File

@ -28,6 +28,7 @@
"less": "^3.0.4",
"less-loader": "^4.1.0",
"qs": "^6.7.0",
"sass": "^1.21.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21"
},

View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>App View</title>
<title>急性高原反应自评 - 管理平台</title>
<style>
.loading-text{
font-family: "PingFang SC","Microsoft YaHei",sans-serif;

1
src/assets/config.json Normal file
View File

@ -0,0 +1 @@
{"global":{"$--color-primary":"#2EC7A5"},"local":{}}

View File

@ -0,0 +1,6 @@
$--color-primary: #2EC7A5;
//@import '~element-ui/lib/theme-chalk/index.css';
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

Binary file not shown.

View File

@ -4,7 +4,7 @@ import router from './router'
import Element from 'element-ui'
import Viser from 'viser-vue';
// import YCIcon from './components/YCIcon'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/element-theme.scss'
import 'element-ui/lib/theme-chalk/reset.css'
import './assets/index.less'

View File

@ -4,7 +4,8 @@
:height="headerHeight"
:style="{ 'background-color': colors.primary }" class="clearfix">
<div class="site-logo" :style="{'line-height':headerHeight}">
<img src="./../assets/imgs/logo_white.png" :style="{height:logoSize,'margin-top':logoMarginTop}" alt="site-logo"
<img src="./../assets/imgs/logo_white.png" :style="{height:logoSize,'margin-top':logoMarginTop}"
alt="site-logo"
class="header-logo">
<span class="site-text">急性高原反应自评</span>
<span class="line"></span>
@ -61,19 +62,23 @@
</template>
</el-menu>
</el-aside>
<el-main class="content" :style="{'background-color':colors.contentBg}">
<el-main class="content page-content-wrapper" :style="{'background-color':colors.contentBg}">
<div class="page-header-nav clear-float">
<div class="float-left">
<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
<span class="pull-left float-left" style="margin-right: 3px;font-weight: bold">
<i class="icon icon-home" style="vertical-align: middle;font-size: 16px;"
:style="{color:colors.primary}"></i>
<span style="font-size: 15px;">当前位置:</span>
</span>
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
<span class="pull-left float-left" style="margin-right: 3px;font-weight: bold">
<i class="icon icon-home" style="vertical-align: middle;font-size: 16px;"
:style="{color:colors.primary}"></i>
<span style="font-size: 15px;">当前位置:</span>
</span>
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<router-view></router-view>
</el-main>
</el-container>
@ -174,8 +179,8 @@
<style lang="less">
@color-main: #2EC7A5;
@color-hover:#cbfbf0;
@size-logo-font:20px;
@color-hover: #cbfbf0;
@size-logo-font: 20px;
@head-height: 55px;
.el-submenu__title, .el-menu-item {
height: auto;
@ -184,6 +189,9 @@
.page-wrapper {
height: 100vh;
}
.page-content-wrapper{
position: relative;
}
.el-dialog__header {
text-align: center;
@ -192,7 +200,7 @@
.site-logo {
display: inline-block;
color:#fff;
color: #fff;
img {
margin-right: 5px;
float: left;
@ -202,15 +210,15 @@
font-size: @size-logo-font;
font-family: "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.line{
.line {
display: inline-block;
border-left: solid 1px #eee;
height: 20px;
vertical-align: text-bottom;
margin: 0 10px;
}
.small-text{
font-size:@size-logo-font - 10px;
.small-text {
font-size: @size-logo-font - 10px;
}
}
@ -227,8 +235,9 @@
height: 100%;
box-sizing: border-box;
}
.el-menu-item,.el-submenu__title{
&:hover,&:focus{
.el-menu-item, .el-submenu__title {
&:hover, &:focus {
background: @color-hover;
}
}
@ -237,11 +246,13 @@
font-size: 22px;
margin-right: 10px;
}
.el-submenu{
.el-menu{
.el-submenu {
.el-menu {
padding: 0;
}
}
.nav-link-item {
.nav-link {
display: block;
@ -262,7 +273,7 @@
color: #fff;
}
}
.nav-sub-link{
.nav-sub-link {
padding-left: 10px;
}
}

View File

@ -1,5 +1,8 @@
<template>
<div id="user-list">
<a href="##" class="header_nav_right" @click="dialogExportVisible=true">
<i class="el-icon-download"></i>导出
</a>
<div class="search-bar">
<el-form :inline="true" :model="searchModel" class="demo-form-inline">
<el-form-item>
@ -23,9 +26,6 @@
<el-option label="评估总分排序" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dialogExportVisible=true">导出</el-button>
</el-form-item>
</div>
</el-form>
</div>
@ -58,50 +58,56 @@
:total="totalCount">
</el-pagination>
</div>
<el-dialog title="收货地址" :visible.sync="dialogExportVisible">
<el-dialog title="导出记录" :visible.sync="dialogExportVisible">
<el-form name="dialog" :model="exportModel">
<el-form-item label="导出数据">
<p><b>导出数据</b></p>
<el-form-item>
<el-radio-group v-model="exportModel.dataCount">
<el-radio label="当前筛选数据(200条)" value="current"></el-radio>
<el-radio label="所有数据(12000条)" value="all"></el-radio>
<el-radio label="current">当前筛选数据(200)</el-radio>
<el-radio label="all">所有数据(12000)</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导出字段">
<p><b>导出字段</b></p>
<el-form-item>
<el-checkbox-group v-model="exportModel.fields_basic">
<el-checkbox border label="自评时间" name="type"></el-checkbox>
<el-checkbox border label="姓名" name="type"></el-checkbox>
<el-checkbox border label="头痛症状" name="type"></el-checkbox>
<el-checkbox border label="胃肠道症状" name="type"></el-checkbox>
<el-checkbox border label="劳累或疲劳" name="type"></el-checkbox>
<el-checkbox border label="头晕或眩晕" name="type"></el-checkbox>
<el-checkbox border label="总分" name="type"></el-checkbox>
<el-checkbox border label="评估结果" name="type"></el-checkbox>
<el-checkbox border label="time">自评时间</el-checkbox>
<el-checkbox border label="name">姓名</el-checkbox>
<el-checkbox border label="head">头痛症状</el-checkbox>
<el-checkbox border label="gastrointestinal">胃肠道症状</el-checkbox>
<el-checkbox border label="tired">劳累或疲劳</el-checkbox>
<el-checkbox border label="dizzy">头晕或眩晕</el-checkbox>
<el-checkbox border label="score">总分</el-checkbox>
<el-checkbox border label="result">评估结果</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="可选字段">
<p>
<b>可选字段</b><br />
<small>基本信息</small>
</p>
<el-form-item>
<el-checkbox-group v-model="exportModel.fields_basic">
<el-checkbox border label="性别" name="type"></el-checkbox>
<el-checkbox border label="年龄" name="type"></el-checkbox>
<el-checkbox border label="身高" name="type"></el-checkbox>
<el-checkbox border label="体重" name="type"></el-checkbox>
<el-checkbox border label="久居地" name="type"></el-checkbox>
<el-checkbox border label="抽烟量" name="type"></el-checkbox>
<el-checkbox border label="饮酒量" name="type"></el-checkbox>
<el-checkbox border label="首次进藏" name="type"></el-checkbox>
<el-checkbox border label="既往病历" name="type"></el-checkbox>
<el-checkbox border label="gender">性别</el-checkbox>
<el-checkbox border label="age">年龄</el-checkbox>
<el-checkbox border label="height">身高</el-checkbox>
<el-checkbox border label="weight">体重</el-checkbox>
<el-checkbox border label="address">久居地</el-checkbox>
<el-checkbox border label="smoke">抽烟量</el-checkbox>
<el-checkbox border label="drink">饮酒量</el-checkbox>
<el-checkbox border label="is_first_to">首次进藏</el-checkbox>
<el-checkbox border label="medal_history">既往病历</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="导出格式">
<p><b>导出格式</b></p>
<el-form-item>
<el-radio-group v-model="exportModel.format">
<el-radio label="CSV" value="csv"></el-radio>
<el-radio label="Excel" value="excel"></el-radio>
<el-radio label="csv">CSV</el-radio>
<el-radio label="excel">Excel</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="dialogFormVisible = false"> </el-button>
<el-button @click="dialogExportVisible = false"> </el-button>
<el-button type="primary" @click="dialogExportVisible = false"> </el-button>
</div>
</el-dialog>
</div>
@ -123,8 +129,8 @@
cities: [],
exportModel: {
dataCount: 'current',
fields_basic: '',
fields_optional: '',
fields_basic: [],
fields_optional: [],
format: 'csv'
},
searchModel: {
@ -153,13 +159,54 @@
}
</script>
<style scoped lang="less">
<style lang="less">
@color-checkbox:#cccccc;
@color-checkbox-checked:#78909C;
@color-checkbox-inner-checked:#fff;
.header_nav_right{
position: absolute;
top:20px;
right:20px;
color:#333;
}
.select-sex {
input {
width: 90px;
}
}
.el-checkbox,.el-checkbox__input.is-focus{
.el-checkbox__inner{
border-radius: 50%;
background-color: @color-checkbox;
border-color: @color-checkbox;
&:after{
transform: rotate(45deg) scaleY(1);
}
}
&.is-checked{
&.is-bordered{
border-color: @color-checkbox-checked;
background: @color-checkbox-checked;
}
.el-checkbox__inner{
background-color: @color-checkbox-inner-checked;
border-color: @color-checkbox-inner-checked;
color:@color-checkbox-checked;
&:after{
border-color:@color-checkbox-checked;
}
}
.el-checkbox__label{
color:@color-checkbox-inner-checked;
}
}
}
.el-checkbox.is-bordered.el-checkbox--medium,
.el-checkbox.is-bordered+.el-checkbox.is-bordered{
width: 140px;
margin-left: 0;
}
.user-head-name {
height: 80px;
&:after {

1218
yarn.lock

File diff suppressed because it is too large Load Diff