Browse Source

增加demo学习

master
VIVIMAN 3 years ago
parent
commit
184dd9a4d2
  1. 16873
      gui_wails02_learn/frontend/package-lock.json
  2. 6
      gui_wails02_learn/frontend/src/App.vue
  3. 27
      gui_wails02_learn/frontend/src/components/About.vue
  4. 25
      gui_wails02_learn/frontend/src/components/BtnClose.vue
  5. 13
      gui_wails02_learn/frontend/src/components/Dropdown.vue
  6. 320
      gui_wails02_learn/frontend/src/components/demo.vue

16873
gui_wails02_learn/frontend/package-lock.json

File diff suppressed because it is too large

6
gui_wails02_learn/frontend/src/App.vue

@ -15,6 +15,7 @@ import Notification from './components/Notification.vue'
import Settings from './components/Settings.vue'
import Sidebar from './components/Sidebar.vue'
import Stats from './components/Stats.vue'
import Demo from './components/Demo.vue'
import './assets/css/main.css'
export default {
@ -26,12 +27,13 @@ export default {
Notification,
Settings,
Sidebar,
Stats
Stats,
Demo
},
data() {
return {
currentView: 'Editor'
currentView: 'Demo'
}
},

27
gui_wails02_learn/frontend/src/components/About.vue

@ -9,28 +9,15 @@
<!-- info -->
<div class="text-center text-gray-100 w-full">
<p class="mb-1">{{ pkg.name }} {{ pkg.version }}</p>
<p class="mb-1">
© 2020
<span
class="cursor-pointer hover:text-purple-400 ta-color-slow"
@click="openLink('https://christophermurphy.dev')"
>{{ pkg.author.name }}</span
>
<p class="mb-1"> © 2020
<span class="cursor-pointer hover:text-purple-400 ta-color-slow"
@click="openLink('https://christophermurphy.dev')">{{ pkg.author.name }}</span>
</p>
<p class="mb-1">
<span
class="cursor-pointer hover:text-purple-400 ta-color-slow"
@click="
openLink('https://github.com/Splode/optimus/blob/main/LICENSE')
"
>License</span
>
and
<span
class="cursor-pointer hover:text-purple-400 ta-color-slow"
@click="openLink('https://github.com/splode/optimus')"
>Documentation</span
>
<span class="cursor-pointer hover:text-purple-400 ta-color-slow"
@click="openLink('https://github.com/Splode/optimus/blob/main/LICENSE')">License</span>
and<span class="cursor-pointer hover:text-purple-400 ta-color-slow"
@click="openLink('https://github.com/splode/optimus')">Documentation</span>
</p>
</div>
</div>

25
gui_wails02_learn/frontend/src/components/BtnClose.vue

@ -1,25 +1,8 @@
<template>
<button
class="border-2 border-gray-800 cursor-pointer flex focus:outline-none hover:border-gray-400 hover:bg-gray-900 items-center justify-center p-2 ta-slow rounded-full w-10 h-10"
>
<svg
version="1.1"
id="x"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 11.9 11.9"
style="enable-background:new 0 0 11.9 11.9;"
width="14"
height="14"
:class="color"
xml:space="preserve"
>
<path
fill="#b3b3b3"
d="M10.4,0L6,4.5L1.5,0L0,1.5L4.5,6L0,10.4l1.5,1.5L6,7.5l4.5,4.5l1.5-1.5L7.5,6l4.5-4.5L10.4,0z"
/>
<button class="border-2 border-gray-800 cursor-pointer flex focus:outline-none hover:border-gray-400 hover:bg-gray-900 items-center justify-center p-2 ta-slow rounded-full w-10 h-10">
<svg version="1.1" id="x" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 11.9 11.9" style="enable-background:new 0 0 11.9 11.9;" width="14" height="14" :class="color" xml:space="preserve">
<path fill="#b3b3b3" d="M10.4,0L6,4.5L1.5,0L0,1.5L4.5,6L0,10.4l1.5,1.5L6,7.5l4.5,4.5l1.5-1.5L7.5,6l4.5-4.5L10.4,0z"/>
</svg>
</button>
</template>

13
gui_wails02_learn/frontend/src/components/Dropdown.vue

@ -1,20 +1,11 @@
<template>
<div class="btn-group">
<li
@click="toggleMenu()"
class="dropdown-toggle py-2"
v-if="selectedOption.name !== undefined"
:class="showMenu ? 'rounded-bl-none rounded-br-none' : ''"
>
<li @click="toggleMenu()" class="dropdown-toggle py-2" v-if="selectedOption.name !== undefined" :class="showMenu ? 'rounded-bl-none rounded-br-none' : ''">
{{ selectedOption.name }}
<span class="caret"></span>
</li>
<li
@click="toggleMenu()"
class="dropdown-toggle"
v-if="selectedOption.name === undefined"
>
<li @click="toggleMenu()" class="dropdown-toggle" v-if="selectedOption.name === undefined">
{{ placeholderText }}
<span class="caret"></span>
</li>

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

@ -0,0 +1,320 @@
<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_gbtxnl:'',
// men_gbtxnl:'',
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