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. 31
      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. 342
      gui_wails02_learn/frontend/src/components/Settings.vue
  7. 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'
}
},

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

@ -2,35 +2,22 @@
<section class="bg-gray-800 overflow-y-auto p-10 w-full">
<header class="flex items-center justify-between w-full">
<h1 class="font-medium text-2xl text-purple-400">About</h1>
<BtnClose @click.native="closeView" color="purple" />
<BtnClose @click.native="closeView" color="purple"/>
</header>
<div class="flex flex-wrap items-center justify-center pt-16 w-full">
<div class="flex items-center justify-center logo w-full h-64"></div>
<!-- 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>
@ -44,7 +31,7 @@ import pkg from './../../package.json'
export default {
name: 'About',
components: { BtnClose },
components: {BtnClose},
data() {
return {

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>

342
gui_wails02_learn/frontend/src/components/Settings.vue

@ -1,16 +1,16 @@
<template>
<section
class="bg-gray-800 overflow-y-auto p-10 w-full"
id="settings"
ref="section"
class="bg-gray-800 overflow-y-auto p-10 w-full"
id="settings"
ref="section"
>
<header class="flex items-center justify-between w-full">
<h1 class="font-medium text-2xl text-green">Options</h1>
<BtnClose @click.native="closeView" />
<BtnClose @click.native="closeView"/>
</header>
<div
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
>
<h2 class="mb-3 text-gray-200 text-xl w-full">General</h2>
<div class="flex items-center mr-6 my-2 px-4 text-gray-100">
@ -18,10 +18,10 @@
Target
</p>
<Dropdown
:options="targets"
:selected="target"
class="m-0 text-gray-200"
v-on:update-option="selectTarget"
:options="targets"
:selected="target"
class="m-0 text-gray-200"
v-on:update-option="selectTarget"
></Dropdown>
</div>
<div class="flex flex-wrap items-center mr-8 my-2 px-4 text-gray-100">
@ -29,82 +29,82 @@
Destination
</p>
<p
@click="selectOutDir"
class="bg-gray-900 cursor-pointer font-mono hover:text-green mx-4 px-4 py-2 rounded-md ta-color-slow"
@click="selectOutDir"
class="bg-gray-900 cursor-pointer font-mono hover:text-green mx-4 px-4 py-2 rounded-md ta-color-slow"
>
{{ config.outDir }}
</p>
<button
@click="openDir"
class="cursor-pointer"
v-tooltip.right-end="'Open destination directory'"
@click="openDir"
class="cursor-pointer"
v-tooltip.right-end="'Open destination directory'"
>
<svg
height="18"
id="Layer_1"
style="enable-background:new 0 0 24 24;"
version="1.1"
viewBox="0 0 24 24"
width="20"
x="0px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px"
height="18"
id="Layer_1"
style="enable-background:new 0 0 24 24;"
version="1.1"
viewBox="0 0 24 24"
width="20"
x="0px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px"
>
<path
d="M20,3H4C2.9,3,2,3.9,2,5v14c0,1.1,0.9,2,2,2h5v-2H4V7h16v12h-5v2h5c1.1,0,2-0.9,2-2V5C22,3.9,21.1,3,20,3z"
fill="#b3b3b3"
d="M20,3H4C2.9,3,2,3.9,2,5v14c0,1.1,0.9,2,2,2h5v-2H4V7h16v12h-5v2h5c1.1,0,2-0.9,2-2V5C22,3.9,21.1,3,20,3z"
fill="#b3b3b3"
/>
<path d="M13,21v-5h3l-4-5l-4,5h3v5H13z" fill="#b3b3b3" />
<path d="M13,21v-5h3l-4-5l-4,5h3v5H13z" fill="#b3b3b3"/>
</svg>
</button>
</div>
<div class="flex flex-wrap items-center my-2 px-4 text-gray-100">
<label
for="prefix"
v-tooltip.right-end="{
for="prefix"
v-tooltip.right-end="{
content: 'A string to prepend to the converted image filename.'
}"
>Prefix</label
>Prefix</label
>
<input
@change="setConfig"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green mx-4 px-4 py-2 rounded-md ta-color-slow"
id="prefix"
maxlength="16"
type="text"
v-model="config.prefix"
@change="setConfig"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green mx-4 px-4 py-2 rounded-md ta-color-slow"
id="prefix"
maxlength="16"
type="text"
v-model="config.prefix"
/>
</div>
<div class="flex flex-wrap items-center my-2 px-4 text-gray-100">
<label
for="suffix"
v-tooltip.right-end="{
for="suffix"
v-tooltip.right-end="{
content: 'A string to append to the converted image filename.'
}"
>Suffix</label
>Suffix</label
>
<input
@change="setConfig"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green mx-4 px-4 py-2 rounded-md ta-color-slow"
id="suffix"
maxlength="16"
type="text"
v-model="config.suffix"
@change="setConfig"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green mx-4 px-4 py-2 rounded-md ta-color-slow"
id="suffix"
maxlength="16"
type="text"
v-model="config.suffix"
/>
</div>
</div>
<div
class="border-2 border-gray-700 flex flex-wrap my-4 px-2 py-4 rounded-md w-full"
class="border-2 border-gray-700 flex flex-wrap my-4 px-2 py-4 rounded-md w-full"
>
<header class="flex px-2 w-full">
<h2 class="text-gray-200 text-xl">Resizing</h2>
<button
@click="addSize"
class="border-0 focus:outline-none hover:green hover:text-green ml-8 ta-slow"
v-tooltip.right-end="{
@click="addSize"
class="border-0 focus:outline-none hover:green hover:text-green ml-8 ta-slow"
v-tooltip.right-end="{
content: 'Add an image size to convert.',
delay: 600
}"
@ -113,74 +113,74 @@
</button>
</header>
<div
:key="i"
class="flex flex-wrap items-center my-2 px-4 text-gray-100 w-full"
v-for="(s, i) in config.sizes"
:key="i"
class="flex flex-wrap items-center my-2 px-4 text-gray-100 w-full"
v-for="(s, i) in config.sizes"
>
<div class="mb-2 lg:mb-0 px-2 w-full sm:w-1/2 lg:w-auto">
<label :for="`width-${i}`" class="block xl:inline-block mb-2 mr-4"
><span
><span
v-tooltip.right-end="
'Width in pixels. Required and must be a positive integer.'
"
>Width</span
></label
>Width</span
></label
>
<input
:id="`width-${i}`"
@blur="setConfig"
@input="handleNumber"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green px-4 py-2 rounded-md ta-color-slow w-full lg:w-auto"
type="text"
v-model.number="s.width"
:id="`width-${i}`"
@blur="setConfig"
@input="handleNumber"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green px-4 py-2 rounded-md ta-color-slow w-full lg:w-auto"
type="text"
v-model.number="s.width"
/>
</div>
<div class="mb-2 lg:mb-0 px-2 w-full sm:w-1/2 lg:w-auto">
<label :for="`height-${i}`" class="block xl:inline-block mb-2 mr-4"
><span
><span
v-tooltip.right-end="
'Height in pixels. Required and must be a positive integer.'
"
>Height</span
></label
>Height</span
></label
>
<input
:id="`height-${i}`"
@blur="setConfig"
@input="handleNumber"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green px-4 py-2 rounded-md ta-color-slow w-full lg:w-auto"
type="text"
v-model.number="s.height"
:id="`height-${i}`"
@blur="setConfig"
@input="handleNumber"
class="bg-gray-900 cursor-pointer focus:outline-none hover:text-green px-4 py-2 rounded-md ta-color-slow w-full lg:w-auto"
type="text"
v-model.number="s.height"
/>
</div>
<div class="mb-2 lg:mb-0 px-2 w-full sm:w-1/2 lg:w-auto">
<label class="block xl:inline-block mb-2 mr-4">Strategy</label>
<div class="flex lg:inline-flex w-full lg:w-auto">
<Dropdown
:options="strategies"
:selected="strategy(s)"
@click.native="handleSelectStrategy(i)"
class="my-0 mr-4 text-gray-200 w-full"
v-on:update-option="selectStrategy"
v-tooltip="strategyTooltip(s)"
:options="strategies"
:selected="strategy(s)"
@click.native="handleSelectStrategy(i)"
class="my-0 mr-4 text-gray-200 w-full"
v-on:update-option="selectStrategy"
v-tooltip="strategyTooltip(s)"
></Dropdown>
<button @click="removeSize(i)">
<svg
height="10"
id="x"
style="enable-background:new 0 0 11.9 11.9;"
version="1.1"
viewBox="0 0 11.9 11.9"
width="10"
x="0px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px"
height="10"
id="x"
style="enable-background:new 0 0 11.9 11.9;"
version="1.1"
viewBox="0 0 11.9 11.9"
width="10"
x="0px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px"
>
<path
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"
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"
fill="#b3b3b3"
/>
</svg>
</button>
@ -190,7 +190,7 @@
</div>
<div
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
>
<h2 class="mb-3 text-gray-200 text-xl w-full">WebP</h2>
<div class="px-4 text-gray-100 w-1/2">
@ -199,7 +199,7 @@
Quality
</p>
<div class="w-full">
<vue-slider @change="setConfig" v-model="config.webpOpt.quality" />
<vue-slider @change="setConfig" v-model="config.webpOpt.quality"/>
</div>
</div>
</div>
@ -207,26 +207,26 @@
<div class="flex items-center w-full">
<p class="mr-4">Lossless</p>
<div
@click="toggleWebpLossless"
class="bg-gray-900 check-wrapper flex items-center justify-center rounded-md"
@click="toggleWebpLossless"
class="bg-gray-900 check-wrapper flex items-center justify-center rounded-md"
>
<transition mode="out-in" name="fade">
<svg
height="24"
id="check-icon"
style="enable-background:new 0 0 24 24;"
v-if="config.webpOpt.lossless"
version="1.1"
viewBox="0 0 24 24"
width="24"
x="0px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0px"
height="24"
id="check-icon"
style="enable-background:new 0 0 24 24;"
v-if="config.webpOpt.lossless"
version="1.1"
viewBox="0 0 24 24"
width="24"
x="0px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0px"
>
<path
d="M10,15.6l-3.3-3.3l-1.4,1.4l4.7,4.7l9.7-9.7l-1.4-1.4L10,15.6z"
fill="#27ffa7"
d="M10,15.6l-3.3-3.3l-1.4,1.4l4.7,4.7l9.7-9.7l-1.4-1.4L10,15.6z"
fill="#27ffa7"
/>
</svg>
</transition>
@ -236,7 +236,7 @@
</div>
<div
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
>
<h2 class="mb-3 text-gray-200 text-xl w-full">JPEG</h2>
<div class="px-4 text-gray-100 w-1/2">
@ -245,27 +245,27 @@
Quality
</p>
<div class="w-full">
<vue-slider @change="setConfig" v-model="config.jpegOpt.quality" />
<vue-slider @change="setConfig" v-model="config.jpegOpt.quality"/>
</div>
</div>
</div>
</div>
<div
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
class="border-2 border-gray-700 flex flex-wrap my-4 p-4 rounded-md w-full"
>
<h2 class="mb-3 text-gray-200 text-xl w-full">PNG</h2>
<div class="px-4 text-gray-100 w-1/2">
<div class="flex items-center w-full">
<p
class="mr-6"
title="Specify the image conversion quality."
v-tooltip.right-end="{ content: tooltips.quality }"
class="mr-6"
title="Specify the image conversion quality."
v-tooltip.right-end="{ content: tooltips.quality }"
>
Quality
</p>
<div class="w-full">
<vue-slider @change="setConfig" v-model="config.pngOpt.quality" />
<vue-slider @change="setConfig" v-model="config.pngOpt.quality"/>
</div>
</div>
</div>
@ -273,8 +273,8 @@
<div class="mb-4 w-full">
<button
@click="restoreDefaults"
class="border-gray-400 btn focus:outline-none hover:bg-green hover:border-green hover:text-gray-900 ml-auto ta-slow"
@click="restoreDefaults"
class="border-gray-400 btn focus:outline-none hover:bg-green hover:border-green hover:text-gray-900 ml-auto ta-slow"
>
Restore Defaults
</button>
@ -287,32 +287,32 @@ import BtnClose from './BtnClose'
import Dropdown from './Dropdown'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
import { EventBus } from '@/lib/event-bus'
import {EventBus} from '@/lib/event-bus'
export default {
name: 'Settings',
components: { BtnClose, Dropdown, VueSlider },
components: {BtnClose, Dropdown, VueSlider},
data() {
return {
activeStrategy: 0,
strategies: [
{ name: 'Fill', value: 0 },
{ name: 'Fit', value: 1 },
{ name: 'Smart Crop', value: 2 }
{name: 'Fill', value: 0},
{name: 'Fit', value: 1},
{name: 'Smart Crop', value: 2}
],
targets: [
{ name: 'WebP', value: 'webp' },
{name: 'WebP', value: 'webp'},
{
name: 'JPEG',
value: 'jpg'
},
{ name: 'PNG', value: 'png' }
{name: 'PNG', value: 'png'}
],
tooltips: {
quality:
'Image quality of the converted image where 0 is the lowest and 100 is the highest.'
'Image quality of the converted image where 0 is the lowest and 100 is the highest.'
}
}
},
@ -328,10 +328,10 @@ export default {
target() {
return (
this.targets.find(t => this.config.target === t.value) || {
name: '',
value: ''
}
this.targets.find(t => this.config.target === t.value) || {
name: '',
value: ''
}
)
}
},
@ -367,16 +367,16 @@ export default {
*/
selectStrategy(e) {
this.$store
.dispatch('setSizeStrategy', {
index: this.activeStrategy,
value: e.value
})
.then(() => {
this.setConfig()
})
.catch(err => {
console.log(err)
})
.dispatch('setSizeStrategy', {
index: this.activeStrategy,
value: e.value
})
.then(() => {
this.setConfig()
})
.catch(err => {
console.log(err)
})
},
/**
@ -437,12 +437,12 @@ export default {
*/
openDir() {
window.backend.Config.OpenOutputDir()
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err)
})
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err)
})
},
/**
@ -450,12 +450,12 @@ export default {
*/
restoreDefaults() {
window.backend.Config.RestoreDefaults()
.then(() => {
this.$store.dispatch('getConfig')
})
.catch(err => {
console.error(err)
})
.then(() => {
this.$store.dispatch('getConfig')
})
.catch(err => {
console.error(err)
})
},
/**
@ -463,13 +463,13 @@ export default {
*/
selectOutDir() {
window.backend.Config.SetOutDir()
.then(res => {
console.log(res)
this.$store.dispatch('getConfig')
})
.catch(err => {
console.error(err)
})
.then(res => {
console.log(res)
this.$store.dispatch('getConfig')
})
.catch(err => {
console.error(err)
})
},
/**
@ -478,13 +478,13 @@ export default {
*/
selectTarget(e) {
this.$store
.dispatch('setConfigProp', { key: 'target', value: e.value })
.then(() => {
this.setConfig()
})
.catch(err => {
console.error(err)
})
.dispatch('setConfigProp', {key: 'target', value: e.value})
.then(() => {
this.setConfig()
})
.catch(err => {
console.error(err)
})
},
/**
@ -499,13 +499,13 @@ export default {
*/
toggleWebpLossless() {
this.$store
.dispatch('toggleWebpLossless')
.then(() => {
this.setConfig()
})
.catch(err => {
console.error(err)
})
.dispatch('toggleWebpLossless')
.then(() => {
this.setConfig()
})
.catch(err => {
console.error(err)
})
}
}
}

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