no message
Former-commit-id: 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 01e0619729e2c82b414d8021bd6dd8366a77a2a6 [formerly c9ecfb5a06c4c8efbd3a462151689aae96d969a8]]]]] Former-commit-id: dd8bf6fcb3bd8f8e26ffe641116c1553ed79f1c8 Former-commit-id: 1e1e94223145fc3e6cb1f99c2ce8498e7c65d297 Former-commit-id: 501f1733b5b8e2d563c1534dec6959fc2c7a2062 [formerly 40e4587ab21042b4bcdc9de9710ba42dd7947e76] Former-commit-id: 9a702dd00fb9817c6173596e45fc43f9139d5e77 Former-commit-id: 40f0b9178a03920b3051b52e003575875e3e95cd Former-commit-id: 5308f1435a0a8c45440b6cf8a4b3503e05327ce0 Former-commit-id: b954ec0ba7a0350cfe02f60e8d65d326276ffd82 Former-commit-id: fb45d77d2d3aa4ba2d2a3cb76240e1dcb864fcfb
This commit is contained in:
@@ -1 +1 @@
|
|||||||
a1a3e79f27ccd26f49976f98524ecb53a980da5e
|
bb297fb7228fc3fc2f78d50a734fc279a0d04e7e
|
||||||
@@ -43,7 +43,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
@import '~@/assets/style/public.scss';
|
@import '~@/assets/style/public.scss';
|
||||||
.container-component {
|
.container-component {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-main-group" :style="styleLayoutMainGroup">
|
<div class="layout-main-group" :style="styleLayoutMainGroup" :class="{grayMode: isGrayMode}">
|
||||||
<div class="layout-main-mask"></div>
|
<div class="layout-main-mask"></div>
|
||||||
<el-container class="layout-main">
|
<el-container class="layout-main">
|
||||||
<!-- 顶栏 -->
|
<!-- 顶栏 -->
|
||||||
@@ -65,7 +65,8 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
themeActive: state => state.d2admin.themeActive
|
themeActive: state => state.d2admin.themeActive,
|
||||||
|
isGrayMode: state => state.d2admin.isGrayMode
|
||||||
}),
|
}),
|
||||||
styleLayoutMainGroup () {
|
styleLayoutMainGroup () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
6759c8ee3afc4da0d88a768285fbd8cc4704cfda
|
7562f0a732bab9f663056b29032ad38a3cfcae86
|
||||||
@@ -1,12 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container class="page-demo-playground-fullscreen">
|
<d2-container class="page-demo-playground-fullscreen">
|
||||||
<template slot="header">全屏</template>
|
<template slot="header">全屏</template>
|
||||||
<el-switch
|
<el-button type="primary" @click="d2adminFullScreenToggle">
|
||||||
v-model="isFullScreen"
|
d2adminFullScreenToggle 切换全屏
|
||||||
active-text="全屏"
|
</el-button>
|
||||||
inactive-text="正常"
|
|
||||||
@change="d2adminFullScreenToggle">
|
|
||||||
</el-switch>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
87
src/pages/demo/playground/gray/index.vue
Normal file
87
src/pages/demo/playground/gray/index.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<d2-container type="full" class="page-demo-playground-gray">
|
||||||
|
<template slot="header">灰度模式</template>
|
||||||
|
<div class="colorful">{{isGrayMode ? 'GRAY' : 'COLORFUL'}}</div>
|
||||||
|
<el-button-group class="d2-mt">
|
||||||
|
<el-button @click="d2adminGrayModeToggle">切换灰度模式</el-button>
|
||||||
|
<el-button @click="d2adminGrayModeSet(true)">打开灰度模式</el-button>
|
||||||
|
<el-button @click="d2adminGrayModeSet(false)">关闭灰度模式</el-button>
|
||||||
|
<el-button @click="dialogVisible = true">模拟报错提示框</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
<el-dialog
|
||||||
|
title="错误"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
:append-to-body="true"
|
||||||
|
width="30%"
|
||||||
|
@open="handleDialogOpen"
|
||||||
|
@closed="handleDialogClosed">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 64px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #F56C6C;
|
||||||
|
margin: -20px 0px;
|
||||||
|
">
|
||||||
|
Error
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="dialogVisible = false" style="width: 100%;">
|
||||||
|
我看到后面的内容已经变为灰度模式
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</d2-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState, mapMutations } from 'vuex'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dialogVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
isGrayMode: state => state.d2admin.isGrayMode
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
'd2adminGrayModeToggle',
|
||||||
|
'd2adminGrayModeSet'
|
||||||
|
]),
|
||||||
|
handleDialogOpen () {
|
||||||
|
this.d2adminGrayModeSet(true)
|
||||||
|
},
|
||||||
|
handleDialogClosed () {
|
||||||
|
this.d2adminGrayModeSet(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '~@/assets/style/public.scss';
|
||||||
|
.page-demo-playground-gray {
|
||||||
|
.colorful {
|
||||||
|
@extend %unable-select;
|
||||||
|
line-height: 300px;
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
background-color: #ffff00;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1 +1 @@
|
|||||||
0d67caa915a29a86ed9d0443090a122d2e676988
|
606766b63bfb19d2bc7fc5a4885a8428c20971a0
|
||||||
@@ -7,7 +7,7 @@ export default {
|
|||||||
// 全屏
|
// 全屏
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
// 灰度
|
// 灰度
|
||||||
isGrayView: false,
|
isGrayMode: false,
|
||||||
// 主题
|
// 主题
|
||||||
themeList,
|
themeList,
|
||||||
themeActive: themeList[1]
|
themeActive: themeList[1]
|
||||||
@@ -30,8 +30,16 @@ export default {
|
|||||||
* 切换灰度状态
|
* 切换灰度状态
|
||||||
* @param {state} state vuex state
|
* @param {state} state vuex state
|
||||||
*/
|
*/
|
||||||
d2adminGrayViewToggle (state) {
|
d2adminGrayModeToggle (state) {
|
||||||
state.isGray = !state.isGray
|
state.isGrayMode = !state.isGrayMode
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置灰度模式
|
||||||
|
* @param {state} state vuex state
|
||||||
|
* @param {boolean} value new value
|
||||||
|
*/
|
||||||
|
d2adminGrayModeSet (state, value) {
|
||||||
|
state.isGrayMode = value
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 激活一个主题(应用到dom上)
|
* 激活一个主题(应用到dom上)
|
||||||
|
|||||||
Reference in New Issue
Block a user