Browse Source

修改文件名

master
Viviman 2 years ago
parent
commit
29f380eaa3
  1. 242
      gui_wails02_learn/frontend/src/components/Demo.vue
  2. 318
      gui_wails02_learn/frontend/src/components/demo.vue

242
gui_wails02_learn/frontend/src/components/Demo.vue

@ -0,0 +1,242 @@
<template>
<el-container>
<el-main v-loading="loading" :element-loading-text="msg">
<!-- 左侧 -->
<el-row>
<el-col :span="5" class="header-left">
<el-row style="height:40px;background-color:#EEEEEE;border:1px solid #E1E1E1;border-width:1px 0px;padding:4px 14px">
demo 123456
</el-row>
</el-col>
<!-- 右侧 -->
<el-col :span="19" class="header-right">demo</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
name: 'Demo',
data() {
return {
setShow: false,
activeIndex: '1',
msg: '加载中',
loading: false,
f_formSET: {
women_txnl: '',
men_txnl: '',
probation: '',
jlnx: '' //
},
}
},
created() {},
watch: {},
mounted() {},
methods: {},
beforeDestroy() {},
}
</script>
<style>
ul,
p {
padding: 0px;
margin: 0px;
}
.exitManageaHeaderSide>.el-button {
margin-left: 0px!important;
margin-right: 8px;
}
.exitManageaHeaderSide>.el-button:last-child {
margin-right: 0;
}
.exitManageSelect input {
height: 30px;
}
.orgPosition .el-input__inner {
height: 30px!important;
line-height: 30px!important;
}
.personDataContainer ul li,
.pictureContainer ul li {
/* width: 24%;
float: left;
margin-left: 1%;
margin-bottom: 15px; */
width: 15%;
float: left;
margin-left: 1%;
margin-bottom: 5px;
margin-top: 10px;
}
.personDataContainer .picture,
.personDataContainer .personInfo {
display: inline-block;
float: left;
}
.personDataContainer .picture {
width: 40%;
}
.personDataContainer .picture img {
width: 100%;
}
.personDataContainer .personInfo {
margin-left: 5px;
width: 50%;
}
.personDataContainer .personInfo p {
font-size: 13px;
margin: 8px 0px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.pictureContainer ul li .picture {
text-align: center;
}
.pictureContainer ul li .picture img {
width: 100%;
/* width: 70%;
padding: 10px;
border: 4px solid #d8d8d8; */
}
.pictureContainer ul li .title {
text-align: center;
}
.personForm {
font-size: 0;
padding: 5px 14px 5px 0px;
text-align: right;
}
.personForm>.el-button {
margin-left: 8px!important;
}
.personSearch {
float: left;
padding: 5px 10px;
}
.el-table .cell {
word-break: initial
}
.textOrg {
width: 50%;
text-align: center;
margin-top: 5px;
}
.el-header {
height: 40px!important;
}
.personSearch{
float: left;
padding: 5px 10px;
}
/* //------------------------- */
.header-left{
border-right:1px solid #e6e6e6;
}
.header-left .tac{
padding:10px 16px;
height:284px;
}
.header-left .tac .el-menu{
border-right:none;
}
.tac-title{
color:#666;
}
.tac-des{
font-size:13px;
color:#999;
}
.el-menu-item.is-active .tac-title{
color:#409EFF !important;
}
.classAffair {
font-size:16px;
padding-left:12px !important;
height:auto;
padding:16px 12px;
line-height: inherit;
white-space: normal;
display: flex;
align-items: center;
position: relative;
}
.classAffair-badge{
position: absolute;
right: -6px;
top: -6px;
display: inline-block;
padding: 3px;
font-size: 12px;
background: #ff7e7e;
color: #fff;
border-radius: 50px;
text-align: center;
}
.classAffair-img,.classAffair-info{
display: inline-block;
}
/* // 提醒设置 */
.setting-main{
height:196px;
}
.setting-title{
background-color: #efefef;
padding:6px 5px 6px 10px;
}
.tac-set-form{
padding:8px 0;
}
.el-menu-item.is-active{
background-color: #d9eaff;
}
.header-right-search{
padding-left:30px;
background-color: #efefef;
}
.header-right-date-picker{
padding:0;
width:220px;
top:2px;
}
/deep/.header-right-date-picker .el-range-separator{
line-height: inherit;
width:20px;
}
.header-right-search .demo-form-inline .search-btn{
border-radius: 4px;
padding:revert;
}
/* 左侧底部设置 */
.tac-footer-btn{
background-color: #daeafd;
text-align: center;
padding:3px 0;
width:100%;
}
</style>

318
gui_wails02_learn/frontend/src/components/demo.vue

@ -1,318 +0,0 @@
<template>
<el-container>
<el-main v-loading="loading" :element-loading-text="msg">
<!-- 左侧 -->
<el-row>
<el-col :span="5" class="header-left">
<el-row style="height:40px;background-color:#EEEEEE;border:1px solid #E1E1E1;border-width:1px 0px;padding:4px 14px">
demo 123456
</el-row>
<el-row class="tac">
<el-col>
<el-menu el-menu :default-active="activeIndex">
<!-- <el-menu-item-group> -->
<el-menu-item index="TXRY" class="classAffair">
<div class="classAffair-img"><i class="el-icon-s-order"></i></div>
<div class="classAffair-info">
<p class="tac-title">即将退休人员</p>
<!-- <p class="tac-des">默认查询30天内即将退休人员</p> -->
</div>
<span class="classAffair-badge">12</span>
</el-menu-item>
<el-menu-item index="CLTXRY" class="classAffair">
<div class="classAffair-img"><i class="el-icon-s-custom"></i></div>
<div class="classAffair-info">
<p class="tac-title">已超退休年龄人员</p>
<!-- <p class="tac-des">默认查询30天内超龄未退休人员</p> -->
</div>
<span class="classAffair-badge">12</span>
</el-menu-item>
<el-menu-item index="JLRY" class="classAffair">
<div class="classAffair-img"><i class="el-icon-s-check"></i></div>
<div class="classAffair-info">
<p class="tac-title">应交流人员</p>
<!-- <p class="tac-des">默认查询任同一工作单位及职务满十年以上人员</p> -->
</div>
<span class="classAffair-badge">12</span>
</el-menu-item>
<el-menu-item index="SYQRY" class="classAffair">
<div class="classAffair-img"><i class="el-icon-user-solid"></i></div>
<div class="classAffair-info">
<p class="tac-title">试用期人员</p>
<!-- <p class="tac-des">默认查询30天内将过试用期人员</p> -->
</div>
<span class="classAffair-badge">12</span>
</el-menu-item>
<el-menu-item index="SRRY" class="classAffair">
<div class="classAffair-img"><i class="el-icon-s-custom"></i></div>
<div class="classAffair-info">
<p class="tac-title">即将过生日人员</p>
<!-- <p class="tac-des">默认查询本月过生日人员</p> -->
</div>
<span class="classAffair-badge">12</span>
</el-menu-item>
<!-- </el-menu-item-group> -->
</el-menu>
</el-col>
</el-row>
<el-row class="setting-main">
<p class="setting-title" v-if="setShow">提醒设置</p>
<el-form label-width="180px" class="demo-ruleForm tac-set-form" v-if="setShow">
<el-form-item label="女性退休年龄设置(年龄)" prop="age">
<el-input v-model="f_formSET.women_txnl"></el-input>
</el-form-item>
<el-form-item label="男性退休年龄设置(年龄)" prop="age">
<el-input v-model="f_formSET.men_txnl"></el-input>
</el-form-item>
<el-form-item label="应交流人员期限设置(年)" prop="age">
<el-input v-model="f_formSET.jlnx"></el-input>
</el-form-item>
<el-form-item label="试用期设置(月)" prop="age">
<el-input v-model="f_formSET.probation"></el-input>
</el-form-item>
</el-form>
</el-row>
<el-row class="tac-footer-btn">
<el-button size="mini" v-if="!setShow" @click="resfSettings">
<i class="el-icon-setting" style="margin-right:5px;"></i>设置提醒
</el-button>
<el-button size="mini" id="query" style="width:90px" v-if="setShow" @click="resfSettings">
<i class="el-icon-circle-check" style="color:#409EFF;margin-right:5px;"></i>保存
</el-button>
<el-button size="mini" v-if="setShow" style="width:90px" @click="resfSettings">
<i class="el-icon-circle-close" style="margin-right:5px;"></i>取消
</el-button>
</el-row>
</el-col>
<!-- 右侧 -->
<el-col :span="19" class="header-right">demo</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
name: 'Demo',
data() {
return {
setShow: false,
activeIndex: '1',
msg: '加载中',
loading: false,
f_formSET: {
women_txnl: '',
men_txnl: '',
probation: '',
jlnx: '' //
},
}
},
created() {},
watch: {},
mounted() {},
methods: {},
beforeDestroy() {},
}
</script>
<style>
ul,
p {
padding: 0px;
margin: 0px;
}
.exitManageaHeaderSide>.el-button {
margin-left: 0px!important;
margin-right: 8px;
}
.exitManageaHeaderSide>.el-button:last-child {
margin-right: 0;
}
.exitManageSelect input {
height: 30px;
}
.orgPosition .el-input__inner {
height: 30px!important;
line-height: 30px!important;
}
.personDataContainer ul li,
.pictureContainer ul li {
/* width: 24%;
float: left;
margin-left: 1%;
margin-bottom: 15px; */
width: 15%;
float: left;
margin-left: 1%;
margin-bottom: 5px;
margin-top: 10px;
}
.personDataContainer .picture,
.personDataContainer .personInfo {
display: inline-block;
float: left;
}
.personDataContainer .picture {
width: 40%;
}
.personDataContainer .picture img {
width: 100%;
}
.personDataContainer .personInfo {
margin-left: 5px;
width: 50%;
}
.personDataContainer .personInfo p {
font-size: 13px;
margin: 8px 0px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.pictureContainer ul li .picture {
text-align: center;
}
.pictureContainer ul li .picture img {
width: 100%;
/* width: 70%;
padding: 10px;
border: 4px solid #d8d8d8; */
}
.pictureContainer ul li .title {
text-align: center;
}
.personForm {
font-size: 0;
padding: 5px 14px 5px 0px;
text-align: right;
}
.personForm>.el-button {
margin-left: 8px!important;
}
.personSearch {
float: left;
padding: 5px 10px;
}
.el-table .cell {
word-break: initial
}
.textOrg {
width: 50%;
text-align: center;
margin-top: 5px;
}
.el-header {
height: 40px!important;
}
.personSearch{
float: left;
padding: 5px 10px;
}
/* //------------------------- */
.header-left{
border-right:1px solid #e6e6e6;
}
.header-left .tac{
padding:10px 16px;
height:284px;
}
.header-left .tac .el-menu{
border-right:none;
}
.tac-title{
color:#666;
}
.tac-des{
font-size:13px;
color:#999;
}
.el-menu-item.is-active .tac-title{
color:#409EFF !important;
}
.classAffair {
font-size:16px;
padding-left:12px !important;
height:auto;
padding:16px 12px;
line-height: inherit;
white-space: normal;
display: flex;
align-items: center;
position: relative;
}
.classAffair-badge{
position: absolute;
right: -6px;
top: -6px;
display: inline-block;
padding: 3px;
font-size: 12px;
background: #ff7e7e;
color: #fff;
border-radius: 50px;
text-align: center;
}
.classAffair-img,.classAffair-info{
display: inline-block;
}
/* // 提醒设置 */
.setting-main{
height:196px;
}
.setting-title{
background-color: #efefef;
padding:6px 5px 6px 10px;
}
.tac-set-form{
padding:8px 0;
}
.el-menu-item.is-active{
background-color: #d9eaff;
}
.header-right-search{
padding-left:30px;
background-color: #efefef;
}
.header-right-date-picker{
padding:0;
width:220px;
top:2px;
}
/deep/.header-right-date-picker .el-range-separator{
line-height: inherit;
width:20px;
}
.header-right-search .demo-form-inline .search-btn{
border-radius: 4px;
padding:revert;
}
/* 左侧底部设置 */
.tac-footer-btn{
background-color: #daeafd;
text-align: center;
padding:3px 0;
width:100%;
}
</style>
Loading…
Cancel
Save