网站开发

Document

html+css+javascript+jquery+vue2基础

HTML、CSS、JS、jQuery Vue2 CDN模式

快速安装 vscode + live server插件
在桌面建一个文件夹,新建一个文件index.html 使用vscode打开文件夹访问index.html

学习网站

html+css+javascript 文档网站

简称mdn,对当下html, css, javascript 描述具有权威的解释之一的网站
mdn链接

html+css常用代码

html+css常用代码

vue-demo页面

vue-demo页面

vue2官网

vue2官网

ui框架官网 element ui

ui框架官网 element ui

学习视频

html+css的学习视频:

html+css的学习视频

javascript+jquery的学习视频:

javascript+jquery的学习视频

vue2+vue3的学习视频,只看vue2的部分:

vue2+vue3的学习视频,只看vue2的部分

html节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--TDK三剑客-->
        <title>文档标题</title>
        <meta name="Keywords" content="英文逗号分隔的关键词列表(始终与页面有关)">
        <meta name="Description" content="页面描述,150字内,搜索引擎根据选择此描述来显示搜索结果。">
        <!--防浏览器缩放异常-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
        
        <!--设备优先使用谷歌内核适配-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <!--以webkit Chromium谷歌内核渲染页面-->
        <meta name="renderer" content="webkit">
        
        <!--防页面缓存-->
        <meta http-equiv="Expires" content="0">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <style>
            a{
                text-decoration: none; //不要下划线
            }
            #container{
                display: flex;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <span class="container-text">111<span>
            <span class="container-text">222<span>
        </div>
        <a href="https://www.baidu.com">
        <img src="https://assets.huibo.com/img/company/login/banner.png">
        
        <h1>大标题全文唯一</h1>
        <h2>副标题</h2>
        <h6>最小标题</h6>

        <form>
            <input type="text" placeholder="输入文本" value="" >
			<input type="hidden" placeholder="隐藏域" value="" >
			<input type="radio" placeholder="单选"  name="" id="">
			<input type="checkbox" placeholder="多选"  name="" id="">
            <textarea placeholder="多行文本"  name="" id=""></textarea>
        </form>

        <script>
            var a=1;
            console.log(a);
        <script>
    </body>
</html>
css节点
    width: 365px;  /*宽度*/
    height: 32px;   /*高度*/

    font-size: 34px; /*字体大小*/
    color: #333333; /*字体颜色*/
    line-height: 38px; /*行高*/
    text-align : center; /*文字居中 left居左 right居右*/
    font-family: PingFang SC, '微软雅黑';  /*字体*/ 
    font-weight: bold; /*加粗 normal正常 100-900数值 500以上加粗*/

    background-color: #FFFFFF; /*背景颜色*/
    background: url('//assets.huibo.com/images/bg_login.png') no-repeat; /*背景图*/
    background-size: 100% 100%; /* 背景图铺满 */

    border : 1px solid #eee; /*一个像素的边框线*/
    
    border-radius : 10px; /*四个角都是圆角*/
    border-radius : 10px 10px 10px 10px; /*上右下左圆角*/

    float:left; float:right; /*靠左侧浮动 靠最右侧浮动 */

    position : absolute; /*绝对定位,会使元素脱离正常的文档流,需要父级节点写relative,不然相对于body定位*/
    position : relative /*相对自己定位,调整top,left , 不会会使元素脱离正常的文档流*/
    position : fixed /*固定与窗口定位  */
    z-index:1; /* 层级1-100000000*/
    left:0; /*距离左边的距离*/
    top:0; /*距离上边的距离*/
    right:0; /*距离右边的距离*/
    bottom:0; /*距离下边的距离*/
    overflow: hidden; /*超出部分隐藏*/
    overflow: visible; /*超出部分显示*/
    margin: 10px 20px 30px 40px; /*上右下左*/ 兄弟节点使用使用margin
    padding:  10px 20px 30px 40px; /*上右下左*/ 父子节点使用padding
    margin-top: 10px; /*距离上间距*/
    padding-top: 10px; /*指定元素内容区顶部与该元素内边距边缘之间的空间大小*/

    display     : block; ///块级元素
    display     : inline-block; //行内元素
   
    /*flex垂直居中对齐*/
    display     : flex;
    align-items : center;
    /*flex水平居中对齐*/
    display     : flex;
    justify-content : center;
    /*flex水平垂直居中对齐*/
    display         : flex;
    align-items     : center;
    justify-content : center;

    /*伪类*/
    :hover{ /* 移入交互*/

    }
    :active{ /* 通常是点击交互*/

    }
    :first-child 和 :last-child{ /* 第一个同级子元素 最后一个同级子元素 */

    }
    :nth-child(1){ /* css中,下标从从1开始 */

    }
JavaScript编程基础
alert('1111') //弹窗一个弹窗

//定义一个变量

var a=1; // 数字
let a=1; // 数字
const a=1; // 数字

let name = "Alice"; // 字符串
let isStudent = true; // 布尔值

//判断
if(name == 'Alice'){
    console.log('我是Alice')
}else if(name == 'Tom'){
    console.log('Tom')
}else{
    console.log('我是谁?')
}

document.getElementById("container1")  //全文找id返回单个元素
document.getElementsByClassName("container2") //全文找class 返回元素数组
document.getElementsByTagName('h1') //全文找标签 <h1> <a> 
document.querySelector(".container2")  //class id 返回第一个匹配的元素
document.querySelectorAll(".container2")   //class id 返回所有匹配的元素
document.createElement()  //创建一个新的HTML元素但不将其添加到DOM中
document.appendChild() //将一个节点添加到指定父节点的子节点列表的末尾
document.removeChild() //从DOM中删除一个节点

addEventListener()  //事件监听器  
removeEventListener() //移除事件监听器

var setTimeoutAlert = setTimeout(funtion(){  //延时器 ,延迟多久后执行,只执行一次
   alert('1秒后执行')
},1000)  
clearTimeout(setTimeoutAlert) //清除延时器

var a=1;
var setAdd = setInterval(funtion(){ //定时器,定时每隔多久执行,一直执行
   a++;
},1000)  
clearInterval(setAdd) //清除定时器

cookie //每个域名下的所有Cookie总数不能超过3000个左右，每个Cookie的最大尺寸通常为4KB

localStorage和sessionStorage //永久缓存和浏览器关闭前缓存

String字符串常见操作

1. 字符串连接

使用 + 运算符可以将多个字符串连接在一起。

let str1 = "Hello, ";
let str2 = "world!";
let result = str1 + str2;
console.log(result); // 输出: Hello, world!

2. 字符串长度

使用 length 属性获取字符串的长度。

let text = "Hello";
console.log(text.length); // 输出: 5

3. 字符串查找

返回指定值首次出现的位置，如果未找到则返回 -1。

let str = "Hello, world!";
console.log(str.indexOf("world")); // 输出: 7

4. 字符串提取

  • slice(start, end)：提取从 start 到 end（不包括 end）之间的字符。

    let str = "Hello, world!";
console.log(str.slice(0, 5)); // 输出: Hello

  • substring(start, end)：类似于 slice()，但是不能接受负数作为参数。

    console.log(str.substring(7, 12)); // 输出: world

  • substr(start, length)：从 start 开始提取指定长度的字符。

    console.log(str.substr(7, 5)); // 输出: world

5. 字符串替换

  • replace(oldValue, newValue)：替换某个子字符串为新的子字符串。注意默认只替换第一次出现的匹配项。

    let str = "Hello, world!";
console.log(str.replace("world", "JavaScript")); // 输出: Hello, JavaScript!

    若要替换所有匹配项，可以使用正则表达式并添加全局标志 g：

    let text = "one two one two";
console.log(text.replace(/one/g, "three")); // 输出: three two three two

6. 字符串大小写转换

  • toUpperCase()：转换为大写。

    let str = "hello";
console.log(str.toUpperCase()); // 输出: HELLO

  • toLowerCase()：转换为小写。

    console.log(str.toLowerCase()); // 输出: hello

7. 字符串拆分

  • split(separator, limit)：根据指定的分隔符分割字符串，返回一个数组。

    let str = "apple,banana,cherry";
console.log(str.split(",")); // 输出: ["apple", "banana", "cherry"]

8. 字符串模板（ES6）

使用反引号（`）创建模板字符串，允许嵌入变量和表达式。

let name = "Alice";
let age = 25;
console.log(`My name is ${name} and I am ${age} years old.`); 
// 输出: My name is Alice and I am 25 years old.

这些只是JavaScript中一些基本的字符串操作方法。通过组合使用这些方法，可以实现更复杂的字符串处理逻辑，满足各种开发需求。

Array数组常见操作

循环

let arr = [1, 2, 3];
for(let i=0; i<arr.length; i++){
    console.log(arr[i]); // 输出: 1, 2, 3
}

使用 forEach 循环遍历数组

let arr = [1, 2, 3];
arr.forEach(function(value) {
    console.log(value);  // 输出: 1, 2, 3
});

添加元素到数组的末尾

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]

在数组开头添加一个或多个元素，并返回数组的新长度。

let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出: [0, 1, 2, 3]

根据索引位置移除数组中的元素，还可以指定要移除的元素数量。

let arr = [1, 2, 3];
let removed = arr.splice(1, 1); // 从索引1开始，移除1个元素
console.log(arr); // 输出: [1, 3] 因为从索引1处移除了值为2的元素

数组连接

let arr = [1, 2, 3];
let newArr = arr.concat([4, 5]);
console.log(newArr); // 输出: [1, 2, 3, 4, 5]

返回找到的第一个匹配项的索引，如果没有找到则返回-1

let arr = [1, 2, 3];
let index = arr.indexOf(2);
console.log(index); // 输出: 1

判断数组是否包含某个值，返回布尔值

let arr = [1, 2, 3];
let hasTwo = arr.includes(2);
console.log(hasTwo); // 输出: true

创建一个新数组，其结果是对原数组中的每个元素调用提供的函数后的返回值

let arr = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];
let names = arr.map(function(item) {
    return item.name;
});
console.log(names); // 输出: ["Alice", "Bob", "Charlie"]

过滤、筛选

let arr = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];
let noBobArray = arr.filter((item) => item.name !== 'Bob');
console.log(noBobArray); 
// 输出: [
//          { name: 'Alice', age: 25 },
//          { name: 'Charlie', age: 35 }
//      ]

slice() 提取不会修改原数组

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1); // 从索引1开始到结尾
console.log(citrus); // 输出: ["Orange", "Lemon", "Apple", "Mango"]

let citrusShort = fruits.slice(1, 3); // 从索引1开始到索引3之前
console.log(citrusShort); // 输出: ["Orange", "Lemon"]

let citrusNegative = fruits.slice(-3, -1); // 从倒数第三个元素开始到倒数第一个元素前
console.log(citrusNegative); // 输出: ["Lemon", "Apple"]

Object对象见操作

当然，以下是按照您提供的格式整理的关于操作JavaScript对象`person`的示例：

```javascript
var person = {
    name: "Alice",
    age: 25,
    isStudent: true
};

// 访问属性
console.log(person.name); // 输出: Alice
console.log(person['name']); // 输出: Alice

// 修改属性
person.age = 26; // 修改属性
console.log(person.age); // 输出: 26

// 添加新属性
person['money'] = 1000; // 添加一个属性
console.log(person.money); // 输出: 1000

// 删除属性
delete person.isStudent; // 删除一个属性
console.log(person.isStudent); // 输出: undefined

// 检测属性是否存在
// 使用 in 运算符
console.log("name" in person); // 输出: true

// 使用 hasOwnProperty() 方法
console.log(person.hasOwnProperty("name")); // 输出: true

// 遍历对象属性使用 for...in 循环
for (var key in person) {
    console.log(key); // 输出: name, age, money
    console.log(person[key]); // 输出: Alice, 26, 1000
}
jQuery简化DOM操作
 $('div'); // 选取所有的<div>元素

    $('.class'); // 选取所有具有特定类名的元素

    $('.class'); // 选取具有特定ID的元素
    $('.class').parent(); //找当节点的父级   
    $('.class').parents(".parent");  //一直向上查找所有父级元素,返回一个节点数组
    $('.class').closest(".parent"); //一直向上查找祖先元素,仅返回第一个匹配的祖先元素
    $('.class').siblings()  //所有同胞元素
    $('.class').siblings('selector') //匹配到的全部同级元素
    $('.class').next() //下一个同胞元素
    $('.class').prev() //前一个同胞元素

    $('.class').each(function(index, element){
        $(this) //指向当前节点
        $(element) //指向当前节点
    })
    var defult_obj = {a:1,b:2,c:3}
    var new_obj = {d:4,e:5,f:6};
    var merge_obj = $.extend(defult_obj, new_obj);
    // merge_obj = {a:1,b:2,c:3,d:4,e:5,f:6}

    //遍历数组(没有附加参数)
    var array = [1,2,3,4,5];
    $.each(array, function(i, value) {
        this;   //this指向当前元素
        i;     //i表示array当前下标
        value;   //value表示array当前元素
    });

    //遍历对象(没有附加参数)
    var object = {a:1,b:2,c:3}
    $.each(object, function(name, value) {
        this;   //this指向当前属性的值
        name;   //name表示object当前属性的名称
        value;   //value表示object当前属性的值
    });
    var html = $('div').html(); // 获取<div>内的HTML内容

    $('div').html('<p>New content</p>');  // 设置<div>内的HTML内容

    $('div').addClass('newClass'); //添加类名,写样式
    $('div').removeClass('oldClass'); //删除类名,写样式

    $('div').attr('data-value'); // 获取<div>元素的data-value属性值

    $('img').attr('src'); // 获取<img>元素的src属性值
    $('img').attr('src', 'newImage.jpg'); // 设置<img>元素的src属性值

    $('button').click(function() {
        alert('Button clicked!');
    });
    $('button').on('click', function() {
        alert('Button clicked!');
    });
    $('body').on('click','button', function() {
        alert('Button clicked!');
    });


    $.ajax({
        url: '/test/demo',
        success: function(result){
            $('#container').html(result);
        }
    });

    $.get('/test/demo?a=1&b=2', function(res) {
        console.log(res);
    });

    $.post('/test/demo', {name: 'John', time: '2pm'}, function(res) {
        console.log(res);
    });
Vue2 cdn模式 模板
vue2官网

vue2官网

ui框架官网 element ui

ui框架官网 element ui 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue2 cdn模式</title>
    <link rel="stylesheet" href="https://assets.huibo.com/cdn_pkg/company-vue-element/company-vue-element.css">
    <script src="https://assets.huibo.com/js/jquery-1.8.3.min.js"></script>
    <script src="https://assets.huibo.com/cdn_pkg/h5-vant/vue.min.js"></script>
    <script src="https://assets.huibo.com/cdn_pkg/pc-vue-element/element.js"></script>
</head>

<body>
    <div id="app">
        <template>
            <span>Message: {{ msg }}</span>
            <div v-bind:id="dynamicId"></div>
            <div :id="dynamicId"></div>
            <a :href="link_url"></a>
            <button @click="handleAdd()">添加数量</button>
            <input v-model="addNum" :value="addNum">
            <img :src="img_url">
            <p v-if="isRender">现在你看到我了</p>
            <p v-show="isShow">现在你看到我了</p>

            <button @click.stop="handleClick">1111</button>

            <ul id="example-1">
                <li v-for="item in items" :key="item.message">
                    {{ item.message }}
                </li>
            </ul>


            <div v-bind:class="{ 'active': isActive, 'disable': isDisable }"
                :class="['container', errorClass, isDisable ? 'disable':'']"></div>


            <!--vue element ui的组件 所有的组件标签都需要结尾渲染的标签-->
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-row>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            <el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
            </el-date-picker>
        </template>
    </div>

    <script>
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };

        var VueDom = new Vue({
            el: '#app',
            //存放码表,变量
            data() {
                return {
                    msg: 'Hello World', // 定义消息字符串
                    dynamicId: 1, // 定义动态ID
                    link_url: 'http://www.baidu.com', // 定义链接URL
                    img_url: '//assets.huibo.com/img/company/login/banner.png', // 定义图片URL
                    isRender: true, // 定义渲染状态，true为渲染，false为不渲染
                    isShow: true, // 定义显示状态，true为可见，false为不可见

                    addNum: 0, // 定义计数器初始值

                    items: [ // 定义列表项，包含两条消息
                        { message: 'Foo' },
                        { message: 'Bar' }
                    ],
                    //获取,界面数据 对象存储
                    a_age: 1,
                    b_age: 2,

                    isActive: true, // 定义活跃状态
                    isDisable: false, // 定义禁用状态
                    errorClass: 'error', // 定义错误类名

                    num: 1, // 定义数字值
                    dateValue1: ''
                };
            },
            computed: { //计算属性
                total() {
                    return this.a_age + this.b_age; //console.log(this.total);
                }
            },
            watch: { //监听器
                total(val, old) {
                    console.log(val);
                },
            },
            //请求接口,准备数据, 以下内容已经设置完成：响应式数据、计算属性、方法和侦听器,还未渲染html节点
            created() {
            },
            mounted() {//渲染完节点
            },
            //节点销毁之前,处理监听事件
            beforeDestroy() {

            },
            //节点销毁之后
            destroyed() {

            },
            methods: { //方法集合
                navTo(name) {
                    window.location.href = `/${name}.html`;
                },
                handleClick($event) {
                    console.log($event.target.innerText);
                },
                handleAdd() {
                    this.addNum++;
                },
                aNumAdd() {
                    this.a_age++;
                },
                bNumAdd() {
                    this.b_age++;
                },
                handleChange(value) {
                    console.log(value);
                }
            }
        });
    </script>
</body>
</html>
php smart +html
    <div>{/$a/}</div>

    {/if $is_contact/}
        <div>111</div>
    {/else/}
        <div>222</div>
    {//if/}

    {/if !empty($resume_list)/} //判断不为空

        {/foreach $resume_list as $k => $v/}

        <div data-val="{/$v['job_id']/}" class="{/if $k == 0/}first{//if/}">
            {/if $v['station']/}{/$v['station']/}{//if/}
        </div>

        {//foreach/}

    {//if/}
    <div data-val="6001" class="first">销售代表</div>
    <div data-val="6002">人力资源</div>
    <div data-val="6003">普工</div>

//html中的js代码 
注释代码 //单行注释或者连接空格后注释 
//代码结尾 打空格后 再注释,不然php模板编辑会报错
var account_id = '{/$account_id/}'; //账户id

//字符串变量使用''包裹
var string = '{/$string/}';

//数字或对象或数组用
var number = {/if $number/}{/$number/}{/else/}0{//if/};
var array = {/if !empty($array)/}{/$array/}{/else/}[]{//if/};


//取值
    var a = {/$a/}
//赋值
{/$a=2/}

//if判断
{/if $is_contact/}
    11
{//if/}


{/if $is_contact/}
22
{/else/}
33
{//if/}

//循环
 
{/if !empty($resume_list)/} //判断不为空
    {/foreach $resume_list as $k => $v/}

    <div class="{/if $k == 0/}first{//if/}">
        {/if $v['station']/}{/$v['station']/}{//if/}
    </div>

    {//foreach/}

{//if/}



//构造js 变量的数据组
var allJobList = [
        {job_id:'',station:'全部职位'},
        {/if !empty($job_list)/}
            {/foreach $job_list as $key=>$val/}
                {
                    job_id: '{/$val['job_id']/}',
                    station: '{/$val['station']/}'
                },
            {//foreach/}
        {//if/}
];

//  var allJobList = [
                        {job_id:'', station:'全部职位'},
                        {job_id: '204',station: '销售代表'}, 
                        {job_id: '205',station: '人力资源'}, 
                    ]


//月薪
var salaryItems = [{value: '0', label: '期望月薪不限'}];
{/foreach $salaries as $key => $value/}
    salaryItems.push({value: '{/$key/}', label: '{/$value/}'});
{//foreach/}

var salaryItems = [{value: '0', label: '期望月薪不限'}];
salaryItems.push({value: '1', label: '2000'});
salaryItems.push({value: '2', label: '3000'});
salaryItems.push({value: '3', label: '4000'});


{/include file="chat/chat.html"/} //在template目录内 /chat/chat.html中定义的代码
jq ajax 使用es6 Promise封装请求
    window.$http={
        post:function(url, params, options){
            return new Promise((resolve, reject) => {
                window.$http.ajax(url, params, 'POST').then(res=>{
                    resolve(res);
                }).catch(err=>{
                    reject(err);
                })
            });
        },
        get:function(url,options){
            return new Promise((resolve, reject) => {
                window.$http.ajax(url, {}, 'GET').then(res=>{
                    resolve(res);
                }).catch(err=>{
                    reject(err);
                })
            });
        },
        // 辅助函数，首尾缺少/补齐一下，如果首尾都有/，直接返回
        ensureSlashes: function(urlPath) {
            if (!urlPath.startsWith('/')) {
                urlPath = '/' + urlPath;
            }
            if (!urlPath.endsWith('/')) {
                urlPath += '/';
            }
            return urlPath;
        },
        //以防使用ajax请求时，可手动配置
        ajax:function(url, params, method, options){
            const new_resume_manange_api = window.$http.ensureSlashes(window.location.pathname.toLowerCase()) == '/resumemanage/resumemanageindexv/'?1:0;
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: method || 'POST',
                    url: url,
                    data: params,
                    async: true, // 设置为false实现同步请求
                    dataType:'json',
                    headers: {
                        Newresumemanangeapi: new_resume_manange_api
                    },
                    ...options,
                    success: function(res){
                        //账号失效
                        if(res.isNeedLogin){
                            window.location.reload();
                            reject();
                            return;
                        }
                        if(res.status || (!res.status && res.code==200)){
                            resolve(res);
                            return;
                        }
                        if (res.code == 701) {
                            // window.CompanyVueDom.companyUnAuth(res);
                            window.common_company_manage.showAuthenticationDialog(1,res.data)
                            reject();
                            return false;
                        }
                        //不报错,打印出来
                        if ([40002].includes(res.code)) {
                            console.log(res.code);
                            reject(res);
                            return false;
                        }
                        if ([40003,40004,40005].includes(res.code)) {
                            $.anchorMsg(res.msg);

                            reject(res);
                            return false;
                        }
                        reject(res);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        // 处理错误的响应，包括断网情况
                        if (textStatus === 'timeout') {
                            // 请求超时
                            $.anchorMsg('请求超时，请检查网络连接');
                            console.log('请求超时，请检查网络连接');
                        } else if (xhr.status === 0) {
                            // 断网或跨域问题
                            // $.anchorMsg('网络连接失败，请检查网络或跨域设置');
                            console.error('网络连接失败，请检查网络或跨域设置');
                        } else if (xhr.statusText == "parsererror" && xhr.responseText) {
                            document.documentElement.innerHTML = xhr.responseText;
                        }else {
                            // 其他错误
                            // $.anchorMsg('发生错误：' + errorThrown);
                            console.error('发生错误：' + errorThrown);
                        }
                        reject(errorThrown); // 返回错误信息
                    }
                });
            });
        },
    }