美的
查看 | 历史 | 提交 | 提交对比
懒羊羊
2023-08-30 71e81ed1d12e4d69f53c8ad9e066650ad4186293
提交 | 用户 | 时间
71e81e 1 <div class="layui-card-header">主题设置</div>
懒 2 <div class="more-theme-list">
3     <div class="more-theme-item active">
4         <img src="${ctxPath}/assets/common/module/img/theme-admin.png"/>
5     </div>
6     <div class="more-theme-item" data-theme="theme-cyan">
7         <img src="${ctxPath}/assets/common/module/img/theme-cyan.png"/>
8     </div>
9     <div class="more-theme-item" data-theme="theme-white">
10         <img src="${ctxPath}/assets/common/module/img/theme-white.png"/>
11     </div>
12     <div class="more-theme-item" data-theme="theme-pink">
13         <img src="${ctxPath}/assets/common/module/img/theme-pink.png"/>
14     </div>
15     <div class="more-theme-item" data-theme="theme-colorful">
16         <img src="${ctxPath}/assets/common/module/img/theme-white.png"/>
17     </div>
18     <div class="more-theme-item" data-theme="theme-blue">
19         <img src="${ctxPath}/assets/common/module/img/theme-blue.png"/>
20     </div>
21     <div class="more-theme-item" data-theme="theme-green">
22         <img src="${ctxPath}/assets/common/module/img/theme-green.png"/>
23     </div>
24     <div class="more-theme-item" data-theme="theme-purple">
25         <img src="${ctxPath}/assets/common/module/img/theme-purple.png"/>
26     </div>
27     <div class="more-theme-item" data-theme="theme-red">
28         <img src="${ctxPath}/assets/common/module/img/theme-red.png"/>
29     </div>
30 </div>
31 <!-- 导航 -->
32 <div class="more-menu-list">
33 <!--    <a class="more-menu-item" href="https://gitee.com/stylefeng/guns" target="_blank">-->
34 <!--        <i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> Guns码云官网-->
35 <!--    </a>-->
36 <!--    <a class="more-menu-item" href="https://www.stylefeng.cn" target="_blank">-->
37 <!--        <i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> &nbsp;stylefeng开源技术-->
38 <!--    </a>-->
39 <!--    <a class="more-menu-item" href="https://demo.easyweb.vip/theme" target="_blank">-->
40 <!--        <i class="layui-icon layui-icon-theme"></i> 主题生成器-->
41 <!--    </a>-->
42 </div>
43 <!-- 控制开关 -->
44 <div class="layui-form" style="margin: 25px 0;" lay-filter="more-set-form">
45     <div class="layui-form-item">
46         <label class="set-item-label">页&emsp;脚：</label>
47         <div class="set-item-ctrl">
48             <input id="setFooter" lay-filter="setFooter" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
49         </div>
50         <label class="set-item-label"> Tab&nbsp;记忆：</label>
51         <div class="set-item-ctrl">
52             <input id="setTab" lay-filter="setTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
53         </div>
54     </div>
55     <div class="layui-form-item">
56         <label class="set-item-label">多标签：</label>
57         <div class="set-item-ctrl">
58             <input id="setMoreTab" lay-filter="setMoreTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
59         </div>
60         <label class="set-item-label">切换刷新：</label>
61         <div class="set-item-ctrl">
62             <input id="setRefresh" lay-filter="setRefresh" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
63         </div>
64     </div>
65     <div class="layui-form-item">
66         <label class="set-item-label">导航箭头：</label>
67         <div class="set-item-ctrl">
68             <input lay-filter="navArrow" type="radio" value="" title="默认" name="navArrow">
69             <input lay-filter="navArrow" type="radio" value="arrow2" title="箭头" name="navArrow">
70             <input lay-filter="navArrow" type="radio" value="arrow3" title="加号" name="navArrow">
71         </div>
72     </div>
73 </div>
74
75 <script>
76     layui.use(['form', 'admin'], function () {
77         var $ = layui.jquery;
78         var form = layui.form;
79         var admin = layui.admin;
80         var setter = admin.setter;
81         var $body = $('body');
82
83         // 切换主题
84         var $themItem = $('.more-theme-item');
85         $themItem.click(function () {
86             $themItem.removeClass('active');
87             $(this).addClass('active');
88             admin.changeTheme($(this).data('theme'));
89         });
90         var theme = $body.data('theme');
91         if (theme) {
92             $themItem.removeClass('active');
93             $themItem.filter('[data-theme="' + theme + '"]').addClass('active');
94         }
95
96         // 关闭/开启页脚
97         form.on('switch(setFooter)', function (data) {
98             var checked = data.elem.checked;
99             admin.putSetting('closeFooter', !checked);
100             checked ? $body.removeClass('close-footer') : $body.addClass('close-footer');
101         });
102         $('#setFooter').prop('checked', !$body.hasClass('close-footer'));
103
104         // 关闭/开启Tab记忆功能
105         form.on('switch(setTab)', function (data) {
106             layui.index.setTabCache(data.elem.checked);
107         });
108         $('#setTab').prop('checked', setter.cacheTab);
109
110         // 关闭/开启多标签
111         form.on('switch(setMoreTab)', function (data) {
112             var checked = data.elem.checked;
113             admin.putSetting('pageTabs', checked);
114             admin.putTempData('indexTabs', undefined);
115             location.reload();
116         });
117         $('#setMoreTab').prop('checked', setter.pageTabs);
118
119         // 切换Tab自动刷新
120         var $mainTab = $('.layui-body>.layui-tab[lay-filter="admin-pagetabs"]');
121         form.on('switch(setRefresh)', function (data) {
122             var checked = data.elem.checked;
123             admin.putSetting('tabAutoRefresh', checked);
124             checked ? $mainTab.attr('lay-autoRefresh', 'true') : $mainTab.removeAttr('lay-autoRefresh');
125         });
126         $('#setRefresh').prop('checked', setter.tabAutoRefresh === true);
127
128         // 导航小三角
129         var $leftNav = $('.layui-layout-admin>.layui-side>.layui-side-scroll>.layui-nav');
130         form.on('radio(navArrow)', function (data) {
131             $leftNav.removeClass('arrow2 arrow3');
132             data.value && $leftNav.addClass(data.value);
133             admin.putSetting('navArrow', data.value);
134         });
135         var navArrow = $leftNav.hasClass('arrow2') ? 'arrow2' : $leftNav.hasClass('arrow3') ? 'arrow3' : '';
136         $('[name="navArrow"][value="' + navArrow + '"]').prop('checked', true);
137
138         form.render('radio', 'more-set-form');
139         form.render('checkbox', 'more-set-form');
140     });
141 </script>
142
143 <style>
144     /* theme */
145     .more-theme-list {
146         padding-left: 15px;
147         padding-top: 20px;
148         margin-bottom: 10px;
149     }
150
151     .more-theme-item {
152         padding: 4px;
153         margin: 0 6px 15px 0;
154         display: inline-block;
155         border: 1px solid transparent;
156     }
157
158     .more-theme-item img {
159         width: 80px;
160         height: 50px;
161         background: #f5f7f9;
162         box-sizing: border-box;
163         border: 1px solid #f5f7f9;
164         cursor: pointer;
165     }
166
167     .more-theme-item:hover, .more-theme-item.active {
168         border-color: #5FB878;
169     }
170
171     .more-menu-item {
172         color: #595959;
173         height: 50px;
174         line-height: 50px;
175         font-size: 16px;
176         padding: 0 25px;
177         border-bottom: 1px solid #e8e8e8;
178         font-style: normal;
179         display: block;
180     }
181
182     /* menu */
183     .more-menu-item:first-child {
184         border-top: 1px solid #e8e8e8;
185     }
186
187     .more-menu-item:hover {
188         color: #595959;
189         background: #f6f6f6;
190     }
191
192     .more-menu-item .layui-icon {
193         font-size: 18px;
194         padding-right: 10px;
195     }
196
197     .more-menu-item:after {
198         color: #8c8c8c;
199         right: 16px;
200         content: "\e602";
201         position: absolute;
202         font-family: layui-icon !important;
203     }
204
205     .more-menu-item.no-icon:after {
206         display: none;
207     }
208
209     /* setting from */
210     .set-item-label {
211         height: 38px;
212         line-height: 38px;
213         padding-left: 20px;
214         display: inline-block;
215     }
216
217     .set-item-ctrl {
218         height: 38px;
219         line-height: 38px;
220         display: inline-block;
221     }
222
223     .set-item-ctrl > * {
224         margin: 0;
225     }
226 </style>