Skip to content

O
office-web
Commit 5848c23a by 无尘
Options

add: 增加首页

parent 36a95280
Showing with 479 additions and 42 deletions
src/components/index/customDialog.vue
......@@ -5,7 +5,7 @@
<p class="custom-dialog__p">请选择您想在首页展示的快捷操作，最多勾选8，已经勾选了<span>{{checkList.length}}</span>个</p>
</div>
<div class="custom-dialog__checkbox">
<el-checkbox-group v-model="checkList" @change="customChange">
<el-checkbox-group v-model="checkList" @change="customChange" :max="8">
<el-checkbox v-for="item in customData" :label="item.id" :key="item.id" name="type">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
......
src/views/index/index.vue
......@@ -3,13 +3,60 @@
<vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"></vue-office-header>
<div id="content" class="content">
<div class="content-body" :style="{height: contentHeight}">
<div class="index-swiper">
<el-carousel trigger="click" height="250px" arrow="never" :autoplay="false">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="index-company flex flex-row m-t-24">
<div class="index-company-left m-r-24 border-box radius-2">
<div class="index-company-logo">
<img :src="companyObj.logo" alt="log"/>
</div>
<div class="index-company-name color-303133">{{companyObj.name}}</div>
<ul>
<li class="flex flex-between"><span>账户余额</span><span class="color-303133 font-16">{{companyObj.money}}</span></li>
<li class="flex flex-between"><span>企业编码</span><span class="color-303133 font-16">{{companyObj.code}}</span></li>
<li class="flex flex-between"><span>企业认证</span><span :class="[companyObj.authStatus == 1? 'authActive':'unAuth']"><i class="iconfont icon-renzheng p-r-6 "></i>{{companyObj.authStatus == 1? '已认证':'未认证'}}</span></li>
<li class="flex flex-between"><span>帮助手册</span><span class="color-1890ff">立即下载<i class="el-icon-arrow-right"></i></span></li>
</ul>
</div>
<div class="index-company-right radius-2">
<div class="index-company-right__head flex flex-between border-box border-b-e4e7e7">
<span class="color-303133 font-16">数据概览</span><span class="auto-define" @click="showDialogLayer"><i class="iconfont icon-zidingyi color-909399"></i></span>
</div>
<div class="index-company-right__body p-24 border-box">
<ul class="flex flex-row flex-wrap">
<li v-for="(item,index) in dataOverview" :key="index">
<div class="color-606266 font-16 data-name">{{ item.name }}</div>
<div class="color-303133 font-30 data-num">{{ item.num }}</div>
</li>
</ul>
</div>
</div>
</div>
<div class="index-entry m-t-24 radius-2">
<div class="index-entry-head flex flex-between border-box border-b-e4e7e7">
<span class="color-303133 font-16">快捷入口</span><span class="auto-define" @click="showDialogLayer"><i class="iconfont icon-zidingyi color-909399"></i></span>
</div>
<div class="index-entry-body p-24 border-box">
<ul class="flex flex-row flex-wrap">
<li v-for="(item,index) in entryData" :key="index" class="flex flex-align-center border-box flex" @click="changeRoute(item.route)">
<span class="square-item flex flex-align-center flex-pack-center" :style="{background: item.color}"><i :class="['iconfont', item.icon]"></i></span>
<span class="color-303133 font-16 p-l-20">{{ item.name }}</span>
</li>
</ul>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
<!-- 自定义弹框组件 -->
<custom-dialog :showCustomDialog="showCustomDialog" @customHandleConfirm="customHandleConfirm"></custom-dialog>
<button @click="showDialogLayer"></button>
<!-- <button @click="showDialogLayer"></button> -->
</div>
</template>
<script>
......@@ -27,12 +74,106 @@ export default {
collapseFlag: false, // 折叠参数
showCustomDialog: false, // 自定义弹框显示标志
// 公司信息
companyObj: {
logo: require('../../assets/logo.png'),
name: '公司名字',
code: '12222221',
money: '2000',
authStatus: 0,
},
// 数据概览
dataOverview: [
{
id: '1',
name: '员工数量',
num: '2500'
},
{
id: '2',
name: '员工数量',
num: '2500'
},
{
id: '11',
name: '员工数量',
num: '2500'
},
{
id: '12',
name: '员工数量',
num: '2500'
},
{
id: '21',
name: '员工数量',
num: '2500'
},
{
id: '22',
name: '员工数量',
num: '2500'
}
],
entryData: [
{
id: '1',
name: '通讯录行政架构',
color: '#16BA8A',
icon: 'icon-hangzhengjiagou',
route: '/index'
},
{
id: '11',
name: '通讯录行政架构',
color: '#1890ff',
icon: 'icon-qiyerenzheng',
route: '/index'
},
{
id: '2',
name: '通讯录行政架构',
color: '#16BA8A',
icon: 'icon-hangzhengjiagou',
route: '/index'
},
{
id: '21',
name: '通讯录行政架构',
color: '#1890ff',
icon: 'icon-qiyerenzheng',
route: '/index'
},
{
id: '32',
name: '通讯录行政架构',
color: '#16BA8A',
icon: 'icon-hangzhengjiagou',
route: '/index'
},
{
id: '31',
name: '通讯录行政架构',
color: '#1890ff',
icon: 'icon-qiyerenzheng',
route: '/index'
}
]
}
},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
this.$router.push(route);
},
// 处理路由跳转
toRouterView(val) {
var that = this;
const that = this;
// 模拟检查数据
// //有两个参数
//{
......@@ -46,25 +187,25 @@ export default {
},
// 折叠事件
collapseTag(val) {
var that = this;
const that = this;
console.log(val);
that.collapseFlag = val
},
// 自定义弹窗显示事件
showDialogLayer() {
var that = this
const that = this
that.showCustomDialog = true;
},
// 自定义弹框触发事件
customHandleConfirm(val) {
var that = this
const that = this
that.showCustomDialog = false;
}
},
mounted() {
var that = this
const that = this
that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px'
},
......@@ -80,11 +221,16 @@ export default {
.content {
padding-top: 64px;
box-sizing: border-box;
overflow: auto;
/*overflow: auto;*/
min-width: 1400px;
height: auto;
background: #f5f8fa;
.content-body {
display: flex;
flex-direction: column;
padding: 24px;
background: #f5f8fa;
overflow: hidden;
.right-wrap {
......@@ -112,6 +258,290 @@ export default {
z-index: 1;
}
}
.index-swiper {
width: 100%;
height: 250px;
}
.el-carousel__item {
background: url(../../assets/index/index_banner1.jpg) no-repeat center center;
}
.color-303133 {
color: #303133;
}
.color-c0c4cc {
color: #c0c4cc;
}
.color-606266 {
color: #606266;
}
.color-1890ff {
color: #1890ff;
}
.color-909399 {
color: #909399;
}
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* display */
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.p-l-6 {
padding-left: 6px;
}
.p-l-20 {
padding-left: 20px;
}
.p-r-6 {
padding-right: 6px;
}
.p-24 {
padding: 24px;
}
.m-t-24 {
margin-top: 24px;
}
.m-r-24 {
margin-right: 24px;
}
.border-b-e4e7e7 {
border-bottom: 1px solid #e4e7e7;
}
.radius-2 {
border-radius: 2px;
}
.font-14 {
font-size: 14px;
}
.font-16 {
font-size: 16px;
}
.font-30 {
font-size: 30px;
}
.icon-zidingyi {
cursor: pointer;
&:hover {
color: #1890ff;
}
}
.square-item {
width: 40px;
height: 40px;
border-radius: 4px;
i {
font-size: 24px;
color: #fff;
}
}
.index-company {
width: 100%;
min-height: 340px;
&-left {
width: 360px;
height: 340px;
padding: 24px;
background: #fff;
li {
height: 40px;
line-height: 40px;
font-size: 14px;
}
.unAuth {
color: #1890ff;
i {
color: #c0c4cc;
}
}
.authActive {
color: #303133;
i {
color: #f7cb27;
}
}
}
&-logo {
text-align: center;
img {
width: 70px;
height: 70px;
border-radius: 6px;
border: 1px solid #DCDFE6;
}
}
&-name {
height: 44px;
margin-bottom: 5px;
line-height: 44px;
font-size: 16px;
text-align: center;
}
&-right {
width: calc(100% - 384px);
min-width: 968px;
background: #fff;
&__head {
height: 56px;
line-height: 56px;
padding: 0 24px;
}
&__body {
li {
min-width: 25%;
}
.data-name {
height: 48px;
line-height: 48px;
}
.data-num {
height: 62px;
line-height: 62px;
margin-bottom: 30px;
}
}
}
}
.index-entry {
width: 100%;
height: 247px;
background: #fff;
&-head {
height: 56px;
line-height: 56px;
padding: 0 24px;
}
&-body {
height: 190px;
li {
min-width: 20%;
height: 56px;
padding-left: 24px;
background: rgba(255,255,255,1);
border: 1px solid rgba(220,223,230,1);
border-radius: 4px;
margin-right: 6.666666%;
margin-bottom: 24px;
cursor: pointer;
&:hover {
border-color: #1890ff;
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
}
}
}
......
theme/index.css
......@@ -3975,12 +3975,13 @@
font-size: 18px;
color: #303133; }
.el-dialog__body {
padding: 30px 20px;
padding: 20px 20px 10px 20px;
color: #606266;
font-size: 14px; }
.el-dialog__footer {
padding: 20px;
padding-top: 10px;
border-top:1px solid #DCDFE6;
padding: 10px 20px;
/* padding-top: 10px; */
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
......@@ -9194,8 +9195,8 @@
.el-radio__input.is-checked .el-radio__inner::after {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1); }
.el-radio__input.is-checked + .el-radio__label {
color: #1890ff; }
/* .el-radio__input.is-checked + .el-radio__label {
color: #1890ff; } */
.el-radio__input.is-focus .el-radio__inner {
border-color: #1890ff; }
.el-radio__inner {
......@@ -9243,7 +9244,7 @@
box-shadow: 0 0 2px 2px #1890ff; }
.el-radio__label {
font-size: 14px;
padding-left: 10px; }
padding-left: 8px; }
/* BEM support Func
-------------------------- */
......@@ -10349,8 +10350,8 @@
.el-checkbox__input.is-checked .el-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; }
/* .el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; } */
.el-checkbox__input.is-focus {
/*focus时 视觉上区分*/ }
.el-checkbox__input.is-focus .el-checkbox__inner {
......@@ -14633,8 +14634,8 @@
.el-checkbox__input.is-checked .el-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; }
/* .el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; } */
.el-checkbox__input.is-focus {
/*focus时 视觉上区分*/ }
.el-checkbox__input.is-focus .el-checkbox__inner {
......@@ -16475,8 +16476,8 @@
.el-checkbox__input.is-checked .el-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; }
/* .el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; } */
.el-checkbox__input.is-focus {
/*focus时 视觉上区分*/ }
.el-checkbox__input.is-focus .el-checkbox__inner {
......@@ -22891,7 +22892,7 @@
width: 25px;
display: inline-block;
float: right;
line-height: 32px; }
line-height: 24px; }
.el-range-editor.el-input__inner {
display: -webkit-inline-box;
......@@ -30037,8 +30038,8 @@
.el-checkbox__input.is-checked .el-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; }
/* .el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; } */
.el-checkbox__input.is-focus {
/*focus时 视觉上区分*/ }
.el-checkbox__input.is-focus .el-checkbox__inner {
......@@ -31812,8 +31813,8 @@
padding-left: 35px;
padding-right: 35px; }
.el-input-number.is-without-controls .el-input__inner {
padding-left: 15px;
padding-right: 15px; }
padding-left: 12px;
padding-right: 12px; }
.el-input-number.is-controls-right .el-input__inner {
padding-left: 15px;
padding-right: 42px; }
......@@ -41626,7 +41627,7 @@
.el-textarea__inner {
display: block;
resize: vertical;
padding: 5px 15px;
padding: 5px 12px;
line-height: 1.5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
......@@ -42410,22 +42411,24 @@
color: #fcce72;
background-color: #fff7e8;
border-color: #feefd0; }
.el-button--danger {
color: #fff;
background-color: #f5222d;
border-color: #f5222d; }
.el-button--danger {
color: #F5222D;
background-color: #F5F7FA;
border-color: #DCDFE6;
}
.el-button--danger:hover, .el-button--danger:focus {
background: #f74e57;
border-color: #f74e57;
background: #F5222D;
border-color: #F5222D;
color: #fff; }
.el-button--danger:active {
background: #dd1f29;
border-color: #dd1f29;
background: #CF1322;
border-color: #CF1322;
color: #fff;
outline: none; }
.el-button--danger.is-active {
background: #dd1f29;
border-color: #dd1f29;
background: #CF1322;
border-color: #CF1322;
color: #fff; }
/* .el-button--danger.is-disabled, .el-button--danger.is-disabled:hover, .el-button--danger.is-disabled:focus, .el-button--danger.is-disabled:active {
color: #fff;
......@@ -42515,7 +42518,8 @@
color: #1890ff;
background: transparent;
padding-left: 0;
padding-right: 0; }
padding-right: 0;
padding: 0; }
.el-button--text:hover, .el-button--text:focus {
color: #46a6ff;
border-color: transparent;
......@@ -43040,8 +43044,8 @@
.el-checkbox__input.is-checked .el-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1); }
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; }
/* .el-checkbox__input.is-checked + .el-checkbox__label {
color: #1890ff; } */
.el-checkbox__input.is-focus {
/*focus时 视觉上区分*/ }
.el-checkbox__input.is-focus .el-checkbox__inner {
......@@ -44408,6 +44412,7 @@
top: -1px;
width: 6px;
height: 6px;
background:none;
vertical-align: middle;
border-radius: 50%;
border: 1px solid #1890FF;
......@@ -44444,7 +44449,9 @@
}
.el-popover {
cursor: pointer;
}
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