2023-12-07学习日记

SWUT胖虎

已于 2023-12-07 22:17:20 修改

阅读量29

点赞数

文章标签：学习

于 2023-12-07 22:15:02 首次发布

本文链接：https://blog.csdn.net/YingHuaBuRuTa/article/details/134866472

版权

大屏1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>

<body>
    <div id="box">
        <div class="img"></div>
        <div id="leftBig"></div>
        <div id="rightBig"></div>
    </div>
    <script>
        var box = document.getElementById('box');

        var leftBig = document.getElementById('leftBig');
        // 左盒子上部小盒子
        var leftSmallTop = document.createElement('div');
        leftSmallTop.classList.add('leftSmallTop');
        // 未出库订单整体盒子宽100%
        var btn = document.createElement('div');
        btn.classList.add('btn');
        leftSmallTop.appendChild(btn);
        // btn左半部分放快进图标
        var btnLeft = document.createElement('div');
        btnLeft.classList.add('btnLeft');
        btn.appendChild(btnLeft);
        // btn右半部分放文字
        var btnRight = document.createElement('div');
        btnRight.classList.add('btnRight');
        btnRight.innerHTML += '<p class="p2">客户名称</p>';
        btn.appendChild(btnRight);
        // 左边蓝色盒子6
        var blueBoxLeft = document.createElement('div');
        blueBoxLeft.classList.add('blueBoxLeft');

        const number6 = document.createElement('span');
        number6.classList.add('number6');
        number6.textContent = '6';

        // 将数字 6 的元素添加到盒子中
        blueBoxLeft.appendChild(number6);

        leftSmallTop.append(blueBoxLeft);
        // 右边蓝色盒子0
        var blueBoxRight = document.createElement('div');
        blueBoxRight.classList.add('blueBoxRight');

        const number0 = document.createElement('span');
        number0.classList.add('number0');
        number0.textContent = '0';

        // 将数字 0 的元素添加到盒子中
        blueBoxRight.appendChild(number0);

        leftSmallTop.append(blueBoxRight);
        // 右边蓝色盒子详细信息
        var detail = document.createElement('div');
        detail.classList.add('detail');

        const line1 = document.createElement('p');
        line1.textContent = '线下: 50';

        const line2 = document.createElement('p');
        line2.textContent = '电商: 50';

        // 将两行文字的元素添加到盒子中
        detail.appendChild(line1);
        detail.appendChild(line2);

        leftSmallTop.appendChild(detail);
        // 下部数量
        var foot = document.createElement('div');
        foot.classList.add('foot');
        const line3 = document.createElement('p');
        line3.classList.add('footP');
        line3.textContent = '数量:114514';
        // line3.classList.add(footP);
        foot.appendChild(line3);

        leftSmallTop.appendChild(foot);

        leftBig.appendChild(leftSmallTop);
        
        // 左盒子下部第一个盒子
        var leftSmall2 = document.createElement('div');
        leftSmall2.classList.add('leftSmall2');
         // 未出库订单整体盒子宽100%
         var btn2 = document.createElement('div');
        btn2.classList.add('btn2');
        leftSmall2.appendChild(btn2);
        // btn左半部分放快进图标
        var btnLeft2 = document.createElement('div');
        btnLeft2.classList.add('btnLeft');
        btn2.appendChild(btnLeft2);
        // btn右半部分放文字
        var btnRight2 = document.createElement('div');
        btnRight2.classList.add('btnRight');
        btnRight2.innerHTML += '<p class="p2">今日订单总数</p>';
        btn2.appendChild(btnRight2);
        // 创建蓝色6的盒子
        var blueBoxLeft2 = document.createElement('div');
        blueBoxLeft2.classList.add('butomleft');
        leftSmall2.appendChild(blueBoxLeft2);

        const number62 = document.createElement('span');
        number62.classList.add('number62');
        number62.textContent = '6';
        // 将数字 6 的元素添加到盒子中
        blueBoxLeft2.appendChild(number62);
        // 创建蓝色0的盒子
        var blueBoxRight2 = document.createElement('div');
        blueBoxRight2.classList.add('butomRight');
        leftSmall2.appendChild(blueBoxRight2);

        const number02 = document.createElement('span');
        number02.classList.add('number62');
        number02.textContent = '0';
        // 将数字 6 的元素添加到盒子中
        blueBoxRight2.appendChild(number02);
        // 创建（线下，电商盒子）
        let slim = document.createElement('div');
        slim.classList.add('slim');
        leftSmall2.appendChild(slim);
        let content = document.createElement('span');
        content.classList.add('content');
        content.innerHTML = '&nbsp&nbsp&nbsp&nbsp&nbsp线下:50&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp电商:10';
        slim.appendChild(content);
        // 创建最底部数量盒子
        let fooooot = document.createElement('div');
        fooooot.classList.add('foo');
        leftSmall2.appendChild(fooooot);
        // 底部数量盒子的文字
        let content3 = document.createElement('span');
        content3.classList.add('content2');
        content3.innerText = '数量:12123';
        fooooot.appendChild(content3);
        leftBig.appendChild(leftSmall2);
        // 左盒子下部第二个
        var leftSmall3 = document.createElement('div');
        leftSmall3.classList.add('leftSmall3');
        // 未出库订单整体盒子宽100%
        var btn3 = document.createElement('div');
        btn3.classList.add('btn2');
        leftSmall3.appendChild(btn3);
        // btn左半部分放快进图标
        var btnLeft3 = document.createElement('div');
        btnLeft3.classList.add('btnLeft');
        btn3.appendChild(btnLeft3);
        // btn右半部分放文字
        var btnRight3 = document.createElement('div');
        btnRight3.classList.add('btnRight');
        btnRight3.innerHTML += '<p class="p2">已出库订单</p>';
        btn3.appendChild(btnRight3);
        // 创建坐下部分第二个小盒子的蓝框
        var blueBoxLeft3 = document.createElement('div');
        blueBoxLeft3.classList.add('butomleft');
        leftSmall3.appendChild(blueBoxLeft3);
        const number63 = document.createElement('span');
        number63.classList.add('number62');
        number63.textContent = '6';
        // 将数字 6 的元素添加到盒子中
        blueBoxLeft3.appendChild(number63);
        
        var blueBoxRight3 = document.createElement('div');
        blueBoxRight3.classList.add('butomRight');
        leftSmall3.appendChild(blueBoxRight3);
        const number03 = document.createElement('span');
        number03.classList.add('number62');
        number03.textContent = '0';
        // 将数字 0 的元素添加到盒子中
        blueBoxRight3.appendChild(number03);

        // 创建（线下，电商盒子）
        let slim2 = document.createElement('div');
        slim2.classList.add('slim');
        leftSmall3.appendChild(slim2);
        let content2 = document.createElement('span');
        content2.classList.add('content');
        content2.innerHTML = '&nbsp&nbsp&nbsp&nbsp&nbsp线下:50&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp电商:10';
        slim2.appendChild(content2);
        //
        let fooooot2 = document.createElement('div');
        fooooot2.classList.add('foo');
        leftSmall3.appendChild(fooooot2);

// 底部数量盒子的文字
        let content4 = document.createElement('span');
        content4.classList.add('content2');
        content4.innerText = '数量:61800';
        fooooot2.appendChild(content4);

        leftBig.appendChild(leftSmall3);
        // 右边大盒子分为5个小盒子
        // 第一个小盒子(序号)
        var rightBig = document.getElementById('rightBig');
        var serial = document.createElement('div');
        serial.classList.add('serial');
        rightBig.appendChild(serial);
        serial.innerHTML += '<p class="p1">序号</p>';
        serial.innerHTML += '<p>1</p>';
        serial.innerHTML += '<hr>';
        serial.innerHTML += '<p>2</p>';
        serial.innerHTML += '<hr>';

        // 第二个小盒子（客户名称）
        var customerName = document.createElement('div');
        customerName.classList.add('customerName');
        customerName.innerHTML += '<p class="p1">客户名称</p>';
        customerName.innerHTML += '<p>1</p>';
        customerName.innerHTML += '<hr>';
        customerName.innerHTML += '<p>2</p>';
        customerName.innerHTML += '<hr>';
        rightBig.appendChild(customerName);
         // 第三个小盒子（地方）
        var place = document.createElement('div');
        place.classList.add('place');
        place.innerHTML += '<p class="p1">地方</p>';
        place.innerHTML += '<p>1</p>';
        place.innerHTML += '<hr>';
        place.innerHTML += '<p>2</p>';
        place.innerHTML += '<hr>';
        rightBig.appendChild(place);
        // 第四个小盒子（数量）
        var quantity = document.createElement('div');
        quantity.classList.add('quantity');
        quantity.innerHTML += '<p class="p1">数量</p>';
        quantity.innerHTML += '<p>1</p>';
        quantity.innerHTML += '<hr>';
        quantity.innerHTML += '<p>2</p>';
        quantity.innerHTML += '<hr>';
        rightBig.appendChild(quantity);
        // 第五个小盒子（配送方式）
        var delivery = document.createElement('div');
        delivery.classList.add('delivery');
        delivery.innerHTML += '<p class="p1">配送方式</p>';
        delivery.innerHTML += '<p>1</p>';
        delivery.innerHTML += '<hr>';
        delivery.innerHTML += '<p>2</p>';
        delivery.innerHTML += '<hr>';
        rightBig.appendChild(delivery);
    </script>
</body>
</html>

hr{
    color: blue;
}
h6{
    color: white;
}
p{
    color: white;
    text-align: center;
}
.p1{
    font-size: large;
    font-weight: bold;
}
.p2{
    font-size: large;
    font-weight: bold;

}
#box{
    width: 1500px;
    height: 700px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    /* left: 6%; */
    box-sizing: border-box;
    background-color: black;
}
.img{
    width: 100%;
    height: 10%;
    background-image: url(../image/大屏.jpg);
    background-size: cover;
    z-index: 5;
}
#leftBig{
    width: 30%;
    height: 89%;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}
#rightBig{
    width: 69.7%;
    height: 87%;
    border: 1px solid blue;
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
}
.leftSmallTop{
    width: 98%;
    height: 55%;
    border: 1px solid blue;
    display: flex;
    flex-wrap: wrap;
}
.leftSmall2{
    width: 45%;
    height: 40%;
    border: 1px solid blue;
}
.leftSmall3{
    width: 45%;
    height: 40%;
    border: 1px solid blue;
    margin-left: 8%;
}

.serial{
    width: 15%;
    height: 25%;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    margin-left: 2%;
    display: block;
    
}
.customerName{
    width: 20%;
    height: 25%;
    /* background-color: rgb(4, 0, 255); */
    display: flex;
    justify-content: center;
    display: block;

}
.place{
    width: 20%;
    height: 25%;
    /* background-color: rgb(90, 89, 143); */
    display: flex;
    justify-content: center;
    display: block;

}
.quantity{
    width: 10%;
    height: 25%;
    /* background-color: rgb(143, 89, 134); */
    display: flex;
    justify-content: center;
    display: block;

}
.delivery{
    width: 30%;
    height: 25%;
    /* background-color: rgb(143, 89, 134); */
    display: flex;
    justify-content: center;
    display: block;
}
.btn{
    width: 50%;
    height: 15%;
    border: 1px solid blue;
    /* 渐变从浅蓝色到黑色 */
    background: linear-gradient(to right,#0b213b, #000000);
    display: flex;
    flex-wrap: wrap;
}
.btnLeft{
    width: 25%;
    height: 100%;
    background-image: url(../image/forward.png);
    background-size: cover;
}
.btnRight{
    width: 70%;
    height: 100%;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn2{
    width: 100%;
    height: 18%;
    border: 1px solid blue;
    /* 渐变从浅蓝色到黑色 */
    background: linear-gradient(to right,#0b213b, #000000);
    display: flex;
    flex-wrap: wrap;
}
.blueBoxLeft{
    width: 25%;
    height: 50%;
    border-radius: 10%;
    position: relative;
    top: 20%;
    right: 40%;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
        /* 从中间蓝色往外散射成淡蓝色 */
    background: radial-gradient(circle, blue, #2ab0f7);

}
.blueBoxLeft .number6 {
    font-size: 870%;
    color: white;
    font-weight: bold;
  }
.blueBoxRight{
    width: 25%;
    height: 50%;
    border-radius: 10%;
    position: relative;
    top: -30%;
    right: -40%;
    border: 1px solid blue;
    /* 从中间蓝色往外散射成淡蓝色 */
    background: radial-gradient(circle, blue, #2ab0f7);
}
.blueBoxRight .number0 {
    font-size: 870%;
    color: white;
    font-weight: bold;
  }
.detail{
    width: 25%;
    height: 50%;
    position: relative;
    top: -30%;
    right: -45%;
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 120%;
}
.foot{
    width: 100%;
    height: 20%;
    border: 1px solid blue;
    position: relative;
    bottom: 20%;
}
.footP{
    font-size: 200%;
    position: relative;
    bottom: 30%;
}
.butomleft{
    width: 35%;
    height: 35%;
    border-radius: 10%;
    position: relative;
    top: 10%;
    right: -10%;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
        /* 从中间蓝色往外散射成淡蓝色 */
    background: radial-gradient(circle, blue, #2ab0f7);
}
.number62{
    font-size: 570%;
    color: white;
    font-weight: bold;
}
.butomRight{
    width: 35%;
    height: 35%;
    border-radius: 10%;
    position: relative;
    top: -25%;
    right: -50%;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
        /* 从中间蓝色往外散射成淡蓝色 */
    background: radial-gradient(circle, blue, #2ab0f7);
}
.slim{
    width: 100%;
    height: 10%;
    border: 1px solid blue;
    position: relative;
    top: -20%;
}
.content{
    color: white;
}
.foo{
    width: 100%;
    height: 18%;
    border: 1px solid blue;
    position: relative;
    top: -20%;
}
.content2{
    font-size: large;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
    /* top: 30%; */
    /* algn-items: center; */
    font-size: 200%;
}

配置了vue ，练习了js的数组和字符串的操作