shopify/html 物流单号查询

最新推荐文章于 2024-09-26 22:28:09 发布

若泽123

最新推荐文章于 2024-09-26 22:28:09 发布

阅读量189

点赞数 4

分类专栏： shopify Web 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45802980/article/details/142215050

版权

shopify 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Web

2 篇文章 0 订阅

订阅专栏

整体效果

liquid /html 代码

<div id="tracking">
        <h2>Tracking</h2>
        <input placeholder="Fill in the tracking number" type="text" name="text" class="input" id="input1">
        <button id="button1">
            <span>Search</span>
        </button>
    </div>

    <div id="tracking">
        <h2>SF Tracking</h2>
        <div class="des">*If your logistics tracking number starts with SF, please use the search box below to search
        </div>
        <input placeholder="Fill in the SF tracking number" type="text" name="text" class="input" id="input2">
        <button id="button2">
            <span>Search</span>
        </button>
 </div>

 <script>
    $("#button1").click(function () {
        var input1 = $("#input1").val();
        if (input1 != "") {
            window.open("https://t.17track.net/en#nums=" + input1);
        } else {
            alert("Please fill in the logistics number");
        }
    });
    $("#button2").click(function () {
        var input2 = $("#input2").val();
        if (input2 != "") {
            window.open("https://www.sf-international.com/cn/en/support/querySupport/waybill?No=" + input2);
        } else {
            alert("Please fill in the logistics number");
        }
    });
</script>
  
  <style>
     #tracking{
    margin: 50px auto;
    width: 100%;
       }
    
        #tracking .input {
               width: 100%;
                max-width: 280px;
                font-size: small;
                height: 4.2em;
                margin-bottom: 30px;
                padding: 12px;
                border-radius: 12px;
                border: 1.5px solid lightgrey;
                outline: none;
                transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
                box-shadow: 0px 0px 20px -18px;
        }

        #tracking .input:hover {
            border: 2px solid lightgrey;
            box-shadow: 0px 0px 20px -17px;
        }

        #tracking .input:active {
            transform: scale(0.95);
        }

        #tracking .input:focus {
            border: 2px solid grey;
        }

        /* From Uiverse.io by NorthFishHasNa */
        #tracking button {
            display: inline-block;
            border-radius: 4px;
            background-color: #3d405b;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 17px;
            padding: 13px;
            width: 130px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        #tracking button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        #tracking button span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -15px;
            transition: 0.5s;
        }

        #tracking button:hover span {
            padding-right: 15px;
        }

        #tracking button:hover span:after {
            opacity: 1;
            right: 0;
        }

        #tracking .des{
            font-size: small;
            margin-bottom: 20px;
            color: rgb(117, 117, 117);
        }
    </style>