该示例仅用于公司原生项目
    vue、react、flutter之后逐步更新

    1. <!--
    2.  * @Author: 付光源
    3.  * @Date: 2021-11-09 09:43:27
    4.  * @LastEditTime: 2021-12-15 10:25:44
    5.  * @LastEditors: Please set LastEditors
    6.  * @Description: 模版页面
    7.  * @FilePath: /gschool/source/html/web_template.html
    8. -->
    10. <!DOCTYPE html>
    11. <html lang="en">
    13. <head>
    14.     <meta charset="UTF-8">
    15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    16.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    17.     <title>Template</title>
    18.     <!-- 开发时将此注释打开-删掉layui样式引入 -->
    19.     <!-- <include file="Public/_css" /> -->
    20.     <!-- 公共基础样式 -->
    21.     <link rel="stylesheet" href="/Public/ysdx-new/css/theme.css">
    22.     <!-- 图标库 -->
    23.     <link rel="stylesheet" href="/Public/ysdx-new/fonts/ant-design-font.css">
    24.     <!-- layui样式 -->
    25.     <link rel="stylesheet" type="text/css" href="/public/layui/css/layui.css?_={$STATIC_VERSION|default=0}">
    26.     <style>
    27.         .bg {
    28.             position: absolute;
    29.             top: 0;
    30.             left: 0;
    31.             right: 0;
    32.             z-index: -1;
    33.             width: 100%;
    34.             height: auto;
    35.         }
    37.         .icon {
    38.             width: 1em;
    39.             height: 1em;
    40.             vertical-align: -0.15em;
    41.             fill: currentColor;
    42.             overflow: hidden;
    43.         }
    45.         .logo {
    46.             width: 80px;
    47.             height: 80px;
    48.             object-fit: contain;
    49.         }
    51.         .top-item {
    52.             position: relative;
    53.             flex: 1;
    54.             padding: 20px;
    55.         }
    57.         .sized-box {
    58.             width: 20px;
    59.             height: 20px;
    60.         }
    62.         /* 两个及以上相同样式抽离 */
    63.         .tab-content {
    64.             margin: 10px;
    65.         }
    66.     </style>
    67. </head>
    69. <body>
    70.     <div style="padding: 10px 5%; min-width: 1080px; position: relative;">
    71.         <!-- 背景 -->
    72.         <img class="bg" src="/Public/ysdx-new/images/bg-icon.png" alt="">
    73.         <!-- 头部 -->
    74.         <div class="c-row" style="margin: 20px 0;">
    75.             <img class="logo" src="/Public/ysdx-new/images/logo-icon.png" alt="">
    76.             <span class="c-title-3 c-bold c-gold" style="margin-right: auto;">演示党校</span>
    77.             <span class="c-title-2 c-white c-pointer" onclick="window.close()">返回</span>
    78.         </div>
    79.         <!-- 头部end -->
    80.         <div class="c-radius c-shadow c-card" style="overflow: hidden;">
    81.             <div class="layui-tab layui-tab-brief">
    82.                 <ul class="layui-tab-title">
    83.                 </ul>
    84.                 <div class="layui-tab-content">
    85.                     <div class="layui-tab-item layui-show">
    86.                         <div class="tab-content">
    87.                             <div class="c-column">
    88.                                 <div class="c-title">一级标题</div>
    89.                                 <div class="c-title-2">二级标题</div>
    90.                                 <div class="c-title-3">三级标题</div>
    91.                                 <div class="c-title-4">四级标题</div>
    92.                                 <div class="c-title-5">五级标题</div>
    93.                                 <div class="c-title-6">六级标题</div>
    94.                                 <div class="c-title-7">七级标题</div>
    95.                                 <div class="c-title-8">八级标题</div>
    96.                                 <div class="c-title-9">九级标题</div>
    97.                                 <div class="c-title-10">十级标题</div>
    98.                                 <div class="c-info">这是一个描述</div>
    99.                                 <div class="c-info c-bold">这是一个加粗的描述</div>
    100.                                 <div class="c-info c-ellipsis" style="width: 200px;">这是一个带省略的描述长长长长长长长长长长长长长长长</div>
    101.                                 <div class="c-row" style="margin: 10px 0;">
    102.                                     <button class="layui-btn" onclick="popMessage()">消息</button>
    103.                                     <button class="layui-btn" onclick="popDialog()">弹窗</button>
    104.                                     <button class="layui-btn" onclick="jumpIcon()">
    105.                                         <span class="iconfont icon-antdesign"></span>
    106.                                         图标库
    107.                                     </button>
    108.                                     <button class="layui-btn" onclick="jumpDoc()">
    109.                                         开发规范
    110.                                     </button>
    111.                                     <button class="layui-btn" onclick="jumpLayui()">
    112.                                         layui文档
    113.                                     </button>
    114.                                 </div>
    115.                                 <div class="c-row c-around">
    116.                                     <div class="c-card c-shadow">
    117.                                         阴影卡片
    118.                                     </div>
    119.                                     <div class="c-card c-shadow c-pointer">
    120.                                         阴影手势卡片
    121.                                     </div>
    122.                                     <div class="c-card c-shadow c-radius">
    123.                                         阴影圆角卡片
    124.                                     </div>
    125.                                     <div class="c-card c-blue-bg">
    126.                                         蓝色背景黑色字体卡片
    127.                                     </div>
    128.                                     <div class="c-card c-orange-bg c-white">
    129.                                         橘色背景白色字体卡片
    130.                                     </div>
    131.                                 </div>
    132.                                 <div class="c-row c-between" style="margin-top: 10px;">
    133.                                     <div class="c-card c-blue-bg c-white" style="flex:1">
    134.                                         居两侧
    135.                                     </div>
    136.                                     <div class="c-card c-orange-bg c-white" style="flex:1">
    137.                                         居两侧
    138.                                     </div>
    139.                                 </div>
    140.                             </div>
    141.                         </div>
    142.                     </div>
    143.                     <div class="layui-tab-item">
    144.                         <div class="tab-content">
    145.                             内容2
    146.                         </div>
    147.                     </div>
    148.                     <div class="layui-tab-item">
    149.                         <div class="tab-content">
    150.                             内容3
    151.                         </div>
    152.                     </div>
    153.                 </div>
    154.             </div>
    155.         </div>
    156.     </div>
    157. </body>
    158. <!-- 开发时将此注释打开-删掉layui及jquery引入 -->
    159. <!-- <include file="Public/_js" /> -->
    160. <script src="/Public/Team/static/js/jquery-2.0.3.min.js?_={$STATIC_VERSION|default=0}"></script>
    161. <script src="/public/layui/layui.js?_={$STATIC_VERSION|default=0}"></script>
    162. <!-- promise兼容IE -->
    163. <script src="/Public/ysdx-new/js/bluebird.js"></script>
    164. <!-- moment时间类库 -->
    165. <script src="__PUBLIC__/ysdx-new/js/moment.min.js"></script>
    166. <!-- api库 -->
    167. <script src="/Public/ysdx-new/api/api.js?_={$STATIC_VERSION|default=0}"></script>
    168. <!-- 在线图标库 -->
    169. <script id="online-icon" src="//at.alicdn.com/t/font_2947624_r77r864mtrr.js"></script>
    170. <!-- 工具类库 -->
    171. <script src="__PUBLIC__/ysdx-new/js/messagebox.js?_={$STATIC_VERSION|default=0}"></script>
    172. <script>
    173.     /**
    174.      * -----------------------------
    175.      *           全局变量
    176.      * -----------------------------
    177.      */
    178.     var type = '栏目一' // 选中菜单
    179.     var menuList = [] // 菜单列表
    182.     /**
    183.      * @description: 页面初始化方法
    184.      * @param {*}
    185.      * @return {*}
    186.      */
    188.     initPage()
    190.     function initPage() {
    191.         getList()
    192.     }
    195.     /**
    196.      * -----------------------------
    197.      *           渲染方法
    198.      * -----------------------------
    199.      */
    201.     /**
    202.      * @description: 初始化栏目一
    203.      * @param {*}
    204.      * @return {*}
    205.      */
    206.     function initTab1() {}
    208.     /**
    209.      * @description: 初始化栏目二
    210.      * @param {*}
    211.      * @return {*}
    212.      */
    213.     function initTab2() {}
    215.     /**
    216.      * @description: 初始化栏目三
    217.      * @param {*}
    218.      * @return {*}
    219.      */
    220.     function initTab3() {}
    222.     /**
    223.      * @description: 渲染tab栏
    224.      * @param {*}
    225.      * @return {*}
    226.      */
    227.     function initTabList() {
    228.         layui.use('element', function () {
    229.             var element = layui.element;
    230.             var titleHtml = ''
    231.             var contentHtml = ''
    232.             menuList.forEach(function (item) {
    233.                 titleHtml += '<li class="' + item.titleClass + '" onclick="changeTab(this)">' + item
    234.                     .label + '</li>'
    235.             });
    236.             $('.layui-tab-title').html(titleHtml)
    237.         });
    238.     }
    241.     /**
    242.      * -----------------------------
    243.      *           逻辑方法
    244.      * -----------------------------
    245.      */
    247.     /**
    248.      * @description: tab栏数据处理
    249.      * @param {*}
    250.      * @return {*}
    251.      */
    252.     function formatTabList() {
    253.         menuList[0].titleClass = 'layui-this'
    254.         menuList.forEach(function (item) {
    255.             item.label = item.title
    256.         });
    257.         initTabList()
    258.     }
    261.     /**
    262.      * -----------------------------
    263.      *           事件方法
    264.      * -----------------------------
    265.      */
    268.     /**
    269.      * @description: tab栏切换
    270.      * @param {*} evt
    271.      * @return {*}
    272.      */
    273.     function changeTab(evt) {
    274.         type = $(evt).text()
    275.         checkTab()
    276.     }
    278.     /**
    279.      * @description: tab栏数据渲染
    280.      * @param {*}
    281.      * @return {*}
    282.      */
    283.     function checkTab() {
    284.         switch (type) {
    285.             case '栏目一':
    286.                 initTab1()
    287.                 break;
    288.             case '栏目二':
    289.                 initTab2()
    290.                 break;
    291.             case '栏目三':
    292.                 initTab3()
    293.                 break;
    294.             default:
    295.                 break;
    296.         }
    297.     }
    299.     /**
    300.      * @description: 消息提示
    301.      * @param {*}
    302.      * @return {*}
    303.      */
    304.     function popMessage() {
    305.         layer.msg('这是消息')
    306.     }
    308.     /**
    309.      * @description: 需要确定的弹窗
    310.      * @param {*}
    311.      * @return {*}
    312.      */
    313.     function popDialog() {
    314.         var html = '<div>这是正文</div>'
    315.         layer.open({
    316.             title: '这是弹窗',
    317.             content: html,
    318.             area: ['400px', '200px'], // 宽 高
    319.             btn: ['确定', '取消'],
    320.             success: function (layero, index) {
    321.                 console.log('加载完成回调')
    322.             },
    323.             yes: function (index, layero) {
    324.                 console.log('这是确定')
    325.                 layer.close(index) // 关闭弹窗
    326.             },
    327.             btn2: function (index, layero) {
    328.                 console.log('这是取消')
    329.             }
    330.         });
    331.     }
    333.     /**
    334.      * @description: 图标库查看
    335.      * @param {*}
    336.      * @return {*}
    337.      */
    338.     function jumpIcon() {
    339.         window.open(
    340.             'https://at.alicdn.com/t/project/2429575/d51dfce8-1748-4ce8-b073-b4fcb5b904de.html?spm=a313x.7781069.1998910419.36'
    341.         )
    342.     }
    344.     /**
    345.      * @description: 前端开发规范查看
    346.      * @param {*}
    347.      * @return {*}
    348.      */
    349.     function jumpDoc() {
    350.         window.open('https://www.yuque.com/chanow/web')
    351.     }
    353.     /**
    354.      * @description: layui文档查看
    355.      * @param {*}
    356.      * @return {*}
    357.      */
    358.     function jumpLayui() {
    359.         window.open('https://layui.org.cn/doc/modules/element.html')
    360.     }
    363.     /**
    364.      * -----------------------------
    365.      *           请求方法
    366.      * -----------------------------
    367.      */
    369.     /**
    370.      * @description: 请求tab栏数据
    371.      * @param {*}
    372.      * @return {*}
    373.      */
    374.     function getList() {
    375.         // 接口测试-所有接口写在api.js文件里
    376.         getTest().then(function (res) {
    377.             console.log(res)
    378.         }).catch(function (err) {
    379.             console.log(err)
    380.         })
    382.         // 模拟数据获取
    383.         setTimeout(function () {
    384.             menuList = [{
    385.                     id: 1,
    386.                     title: '栏目一',
    387.                 },
    388.                 {
    389.                     id: 2,
    390.                     title: '栏目二',
    391.                 },
    392.                 {
    393.                     id: 3,
    394.                     title: '栏目三',
    395.                 },
    396.             ]
    397.             formatTabList()
    398.         }, 1000);
    399.     }
    400. </script>
    402. </html>