master

分支 (1)

管理

管理

master

second-stage
/
xiangqing.html

<!DOCTYPE html>
<html>

<head>
    <title>小郑同学</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <style>
        ul,
        li {
            list-style: none;
        }

        .xiang {
            height: 335px;
            width: 974px;
            margin: 0 auto;
            /* background-color: thistle; */
            margin-top: 20px;

        }

        .news {
            width: 974px;
            /* height: 223px; */
            margin: 0 auto;

        }

        .xuanze {
            display: flex;
            border-top: 1px solid rgba(216, 216, 216, 0.5);
        }

        .xuanze>li {
            width: 84px;
            height: 30px;
            color: #333333;
            border-color: #333333;
            font-size: 15px;
            margin-right: 25px;
            font-weight: bold;
            padding-top: 15px;

        }

        .p1 {
            font-size: 12px;
            height: 150px;
            font-family: 微软雅黑;
            text-indent: 2em;
            border-bottom: 1px solid rgba(216, 216, 216, 0.5);
            margin-bottom: 30px;
        }

        .p2 {
            height: auto;
            display: none;
            padding-bottom: 30px;
            border-bottom: 1px solid rgba(216, 216, 216, 0.5);
        }

        .lianjie {
            width: 974px;
            height: 357px;
            margin: 0 auto;
            /* background-color: darkorange; */
            margin-top: 40px;
        }

        .lianjie>h3 {
            font-size: 18px;
            font-weight: bold;
            color: #555555;
        }

        .shangping {
            float: left;
            display: flex;
            justify-content: space-between;
            height: 323px;
            margin-top: 20px;
        }

        .shangping>li {
            width: 240px;
            height: 329px;
            float: left;
        }

        .shangping>li>a {
            display: block;
            text-decoration: none;
        }

        .shangping>li>a>div {
            width: 220px;
            height: 220px;
            overflow: hidden;
        }

        .shangping>li>a>div>img {
            width: 220px;
            height: 220px;
            transition: all ease-in-out .2s;
        }

        .shangping>li>a>div>img:hover {
            transform: scale(1.2);
            transition: all .6s ease;

        }

        .shangping>li>a>h3 {
            width: 100%;
            height: 19.2px;
            margin-top: 10px;
            text-align: center;
            font-size: 20px;
            color: #adadad;
            font-family: "微软雅黑";
            font-weight: normal;
        }

        .shangping>li>p {
            font-size: 30px;
            text-align: center;
            color: #000000;
            font-family: "georgia";
            /* font-family: "Raleway"; */
        }

        .wuping {
            width: 244px;
            height: 314px;
            /* background-color: cadetblue; */
            float: left;

        }

        .caozuo {
            width: 692px;
            height: 303px;
            /* background-color: chocolate; */
            float: left;
            margin-left: 30px;
        }

        .xian {
            font-weight: normal;
            width: 80px;
            background-color: #dddddd;
            display: block;
            height: 3px;
            margin: 15px 0;
        }

        .jiaqian {
            font-size: 24px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            font-family: "arial";
        }

        .miaosu {
            margin: 15px 0px;
            font-size: 14px;
            font-weight: normal;
            color: #777777;
            font-family: "微软雅黑";
        }

        .tianjia {
            height: 59px;
            /* background-color: coral; */
        }

        .hao {
            font-size: 15px;
            font-weight: normal;
            color: #777777;
            border-color: #dddddd;
            padding: 7px 0px;
            border-top: 1px dotted #ddd;
            border-bottom: 1px dotted #ddd;
        }

        .lei {
            font-size: 15px;
            font-weight: normal;
            color: #777777;
            border-color: #dddddd;
            margin-top: 15px;
        }

        .lei>span {
            color: #dd6363;
        }


        #box1 {
            width: 243px;
            height: 243px;
            float: left;
            position: relative;
        }

        #box2 {
            width: 400px;
            height: 398px;
            overflow: hidden;
            /* float: left; */
            position: absolute;
            left: 522px;
            top: 192px;
            border: 1px solid black;
        }

        #box1>img {
            width: 100%;
            height: 100%;
        }

        #box2>img {
            width: 130%;
            height: 130%;
        }

        #small {
            width: 180px;
            height: 180px;
            background: rgb(238, 229, 230);
            opacity: 0.4;
            position: absolute;
            top: 0;
            left: 0;
        }

        #photo {
            position: absolute;
            top: 0;
            left: 0;
        }

        .active {
            display: block;
        }

        .close {
            display: none;
        }

        .xiaotu {
            width: 100%;
            height: 70px;
            /* background-color: cornflowerblue; */
        }

        .xiaotu>a {
            display: inline-block;
            width: 60px;
            height: 60px;
        }

        .xiaotu>a>img {
            width: 100%;
            height: 100%;
            margin-top: 7px;
            margin-left: 10px;

        }

        .che {
            float: left;
            display: inline-block;
        }

        .che>button {

            background-image: none;
            font-size: 16px;
            font-weight: normal;
            color: #ffffff;
            border-color: #777777;
            background-color: #777777;
            padding-top: 13px;
            padding-bottom: 13px;
            padding-left: 24px;
            padding-right: 24px;
            width: 132px;
            height: 44px;
            text-align: center;
            line-height: 16px;

        }

        .che>button:hover {
            background-color: #232323;
        }

        .sl {
            width: 96px;
            height: 44px;
            display: inline-block;
            float: left;
            margin-left: 50px;
        }

        .sl>button {
            border-color: #cccccc;
            height: 44px !important;
            width: 32px !important;
            background: none;
            background-image: none;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            cursor: pointer;
            display: inline-block;
            filter: none;
            float: left;
            height: 28px;
            left: auto;
            margin: 0;
            position: relative;
            text-align: center;
            top: auto;
            font-size: 14px;
            font-weight: normal;
            color: #333333;
            font-family: arial;
            z-index: -1;
        }
    </style>
</head>

<body>
    <header></header>
    <section style="height: 952px;">
        <div class="xiang">
            <div class="wuping">
                <div id="box1">
                    <img src="./images/4.webp" alt="pho" id="jpg">
                    <div id="small" class="close"></div>
                </div>
                <div id="box2" class="close">
                    <img src="./images/4.webp" alt="pho" id="photo">
                </div>
                <div class="xiaotu">
                    <a href=""> <img src="./images/4.webp" alt=""></a>
                </div>
            </div>
            <div class="caozuo">
                <h1>公道杯</h1>
                <div class="xian"></div>
                <p class="jiaqian">￥199.00</p>
                <p class="miaosu">応损捠捡换，攴朰朲朳枛朸桸桹桺奿妀。</p>
                <div class="tianjia">
                    <div class="che"> <button>加入购物车</button></div>
                    <div class="sl">
                        <button>-</button>
                        <button>1</button>
                        <button>+</button></div>

                </div>
                <div class="hao">商品编号：001003</div>
                <div class="lei">分类：<span> 美之器物</span>,<span> 茶道</span> </div>
            </div>
        </div>
        <div class="news">
            <ul class="xuanze">
                <li>描述</li>
                <li class="pingshu">用户评论(<span>0</span>)</li>
            </ul>
            <div class="p1">
                <p style="color: #808080">当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用
                    户，还是专业网站制作人员，都能设计出最具专业水准的网站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网
                    站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。</p>
                <p style="color: #808080;margin-top: 20px;">
                    当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用
                    户，还是专业网站制作人员，都能设计出最具专业水准的网站。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网
                    站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网
                    站制作和维护成为一件轻松惬意的事。</p>

            </div>
            <div class="p2">

            </div>

            <div class="lianjie">
                <h3>相关商品</h3>
                <ul class="shangping" style="padding-left: 18px;">

                </ul>
            </div>
        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="./js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("foot.html");
    //链接获取某种商品类型最新的几条商品
    $.get("./goodsAndShoppingCart/getGoodsListNew.php", {
        "typeId": "001",
        "count": 4
    }, function (data) {
        // console.log(data);
        show1(data);
    }, "json");

    function show1(data) {
        let str = "";
        for (let i = 0; i < data.length; i++) {
            str += `
        <li><a href="#">
                        <div>
                            <img src="${data[i].goodsImg}" alt="">
                        </div>
                        <h3>${data[i].goodsName}</h3>
                    </a>
                    <p>￥${data[i].goodsPrice}.00</p>
                </li>`;
        }
        $(".shangping").eq(0).html(str);

    }

    var box1 = document.getElementById('box1'), //获取节点部分
        box2 = document.getElementById('box2'),
        small = document.getElementById('small'),
        photo = document.getElementById('photo');
    var oLeft = 0,
        oTop = 0,
        x = 0,
        y = 0,
        m = 0,
        n = 0;
    box1.onmouseenter = function () { //设置移入显示事件
        box2.className = 'active';
        small.className = 'active';
    }
    box1.onmouseleave = function () { //设置移除隐藏事件
        box2.className = 'close';
        small.className = 'close';
    }
    small.onmouseover = function (e) {
        //设置鼠标按下事件
        x = e.clientX - this.offsetLeft;
        y = e.clientY - this.offsetTop;
        document.onmousemove = function (e) {
            //设置鼠标移动事件
            oLeft = e.clientX - x;
            oTop = e.clientY - y;
            if (oLeft <= 0) { //设置small的移动范围为盒子1
                oLeft = 0;
            }
            if (oLeft >= box1.offsetWidth - small.offsetWidth) {
                oLeft = box1.offsetWidth - small.offsetWidth;
            }
            if (oTop <= 0) {
                oTop = 0;
            }
            if (oTop >= box1.offsetHeight - small.offsetHeight) {
                oTop = box1.offsetHeight - small.offsetHeight;
            }
            m = -(parseInt(((photo.offsetWidth + x) / box2.offsetWidth) * oLeft));
            //核心代码等比例移动
            n = -(parseInt(((photo.offsetHeight + y) / box2.offsetHeight) * oTop));
            small.style.left = oLeft + 'px';
            photo.style.left = m + 'px';
            small.style.top = oTop + 'px';
            photo.style.top = n + 'px';
        }.bind(this)
        document.onmouseup = function (e) { //设置鼠标移除事件
            document.onmousemove = 'null';
            document.onmouseup = 'null';
        }
    }

    let oul = $(".xuanze").eq(0).children();
    for (let i = 0; i < oul.length; i++) {
        oul[i].style.borderTop = "none";

        oul[i].onclick = function () {
            for (var j = 0; j < oul.length; j++) {
                oul[j].style.border = "none";
            }
            if (i == 0) {
                $(".p1").eq(0).css({
                    display: "block"
                });
                $(".p2").eq(0).css({
                    display: "none"
                });
                oul[0].style.borderTop = "3px solid #333";
            }
            if (i == 1) {
                $(".p2").eq(0).css({
                    display: "block"
                });
                $(".p1").eq(0).css({
                    display: "none",
                    height: "127px",
                    margin: "0px"
                });
                oul[1].style.borderTop = "3px solid #333";
            }
        }
    }
    $(".che").eq(0).children().eq(0).click(function () {
        location.href = "shopCart.html";
    });

//获取评论接口
    $.get("./goodsAndShoppingCart/getComment.php", {
        "goodsId": "0",
        "pageCount": 2,
        "pageIndex": 1
    }, function (data) {
        str=data.data;
        show2(str)
    }, "json");

function show2(str){
    console.log(str);
    json=JSON.parse(str);
    console.log(json)
    let str1="";
    for(let i=0;i<json.length;i++){
        // console.log(json[i].vipName);
        // console.log(json.length)
        // console.log(i)

       str1+=`<p style="font-size:13px;color:orange;margin:15px 0px">${json[i].vipName}<span style="margin-left:50px;color:orange;">${json[i].commentTime}</span></p>

   <p style="margin-top:20px;font-size:13px">${json[i].content}</p>`;

}
$(".p2").eq(0).html(str1);
$(".pingshu").children("span").html(json.length)
    }


</script>