网站提升转化的 纯HTML 脚本

手机端底部显示 留言表单，邮箱，Whatsapp 快捷键

手机端样式如下：

PC端样式如下：

代码如下：

<div class="elementor-widget-container">
    <style>
        /* 基础样式 - 移动端底部显示（保持不变） */
        .m-foot {
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            background: #004ba5;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;
            border-top: 1px solid #dbdbdb;
        }

        /* 桌面端侧边栏悬浮样式（优化可见性） */
        .desktop-sidebar {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            z-index: 999;
            display: none;
        }

        .desktop-sidebar ul {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .desktop-sidebar ul li {
            margin-bottom: 15px;
            position: relative;
        }

        .desktop-sidebar ul li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            background: #004ba5;          /* 新增：侧边栏背景色 */
            border-radius: 50%;            /* 新增：圆形边框 */
            padding: 12px;                /* 新增：内边距 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);  /* 新增：阴影效果 */
            transition: all 0.3s ease;     /* 过渡效果 */
        }

        .desktop-sidebar ul li a:hover {
            background: #003e85;           /* 悬停背景色 */
            transform: translateY(-5px);   /* 悬停上移效果 */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);  /* 悬停阴影增强 */
        }

        .desktop-sidebar ul li:not(:last-child):after {
            display: none;
        }

        .desktop-sidebar ul li svg {
            color: #ffffff;
            fill: #ffffff;
            width: 32px;
            height: 32px;
            margin-bottom: 5px;
        }

        .desktop-sidebar ul li span {
            line-height: 1.2;
            font-size: 12px;
            color: #ffffff;
            white-space: nowrap;
        }

        /* 响应式设计 - 桌面端显示侧边栏，移动端显示底部栏 */
        @media only screen and (min-width: 769px) {
            .m-foot {
                display: none;
            }
            .desktop-sidebar {
                display: flex;
            }
        }

        @media only screen and (max-width: 768px) {
            .desktop-sidebar {
                display: none;
            }
        }

        /* 移动端分隔线 */
        .m-foot ul li:not(:last-child):after {
            content: "";
            position: absolute;
            right: 0;
            top: 10px;
            bottom: 10px;
            width: 1px;
            background: #dbdbdb;
        }

        .m-foot ul, .desktop-sidebar ul {
            display: flex;
            margin: 0;
            padding: 0;
            list-style: none;
			width:100%;
        }

        .m-foot ul li, .desktop-sidebar ul li {
            box-sizing: border-box;
        }

        .m-foot ul li, .m-foot ul a {
            flex: 1;
            height: 54px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .m-foot ul li svg, .desktop-sidebar ul li svg {
            display: block;
        }

        .m-foot ul li svg {
            color: #ffffff;
            fill: #ffffff;
            width: 22px;
            height: 22px;
            margin-bottom: 2px;
        }

        .m-foot ul li span, .desktop-sidebar ul li span {
            text-align: center;
        }

        .m-foot ul li span {
            line-height: 1.4;
            font-size: 11px;
            color: #ffffff;
            padding: 0 2px;
        }

        /* 第三项特殊样式（保持不变） */
        .m-foot ul li:nth-child(3), .desktop-sidebar ul li:nth-child(3) {
            background: none;
        }

        .m-foot ul li:nth-child(3) span, .desktop-sidebar ul li:nth-child(3) span {
            color: #fff !important;
        }

        /* 图标通用样式 */
        .icon {
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            vertical-align: middle;
            fill: currentColor;
        }
    </style>
    <!-- 移动端底部导航（保持不变） -->
    <div class="m-foot">
        <ul class="row">
            <li>
                <a href="#demo-form" class="popup-with-form" style="cursor: pointer;">
                    <svg t="1677317669124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6548" width="22" height="22">
                        <path d="M804.977778 457.955556C804.977778 284.444444 637.155556 142.222222 429.511111 142.222222 224.711111 142.222222 56.888889 284.444444 56.888889 457.955556c0 76.8 34.133333 150.755556 91.022222 207.644444 8.533333 11.377778 8.533333 73.955556 2.844445 130.844444l-5.688889 48.355556 39.822222-25.6c45.511111-28.444444 102.4-62.577778 119.466667-62.577778 39.822222 11.377778 82.488889 17.066667 125.155555 17.066667 207.644444 0 375.466667-142.222222 375.466667-315.733333zM253.155556 494.933333c-22.755556 0-42.666667-19.911111-42.666667-42.666666s19.911111-42.666667 42.666667-42.666667 42.666667 19.911111 42.666666 42.666666c0 25.6-19.911111 42.666667-42.666666 42.666666z m179.2 0c-22.755556 0-42.666667-19.911111-42.666667-42.666666s19.911111-42.666667 42.666667-42.666667 42.666667 19.911111 42.666666 42.666666c0 25.6-19.911111 42.666667-42.666666 42.666666z m170.666666 0c-22.755556 0-42.666667-19.911111-42.666666-42.666666s19.911111-42.666667 42.666666-42.666667 42.666667 19.911111 42.666667 42.666667c0 25.6-19.911111 42.666667-42.666667 42.666666z" fill="#ffffff" p-id="6549"></path>
                        <path d="M967.111111 534.755556c0-88.177778-42.666667-173.511111-122.311111-233.244445-8.533333-8.533333-22.755556-5.688889-31.288889 2.844445-2.844444 2.844444-2.844444 5.688889-2.844444 8.533333 25.6 45.511111 39.822222 96.711111 39.822222 150.755555 0 170.666667-145.066667 312.888889-335.644445 347.022223-2.844444 2.844444-2.844444 5.688889-2.844444 8.533333-2.844444 11.377778 5.688889 22.755556 19.911111 25.6 62.577778 8.533333 128 5.688889 187.733333-14.222222 17.066667 0 73.955556 34.133333 119.466667 62.577778l39.822222 25.6-5.688889-48.355556c-5.688889-59.733333-5.688889-119.466667 0-130.844444 59.733333-54.044444 93.866667-128 93.866667-204.8z" fill="#ffffff" p-id="6550"></path>
                    </svg>
                    <span>Inquiry</span>
                </a>
            </li>
            <li>
                <a href="https://wa.me/8618037022596" class="whatsapp-link" target="_blank">
                    <svg t="1659174738158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4108" width="22" height="22">
                        <path d="M520.124 64C277.21 64 80.268 259.402 80.268 500.464c0 82.46 23.064 159.58 63.118 225.374L64 960l243.528-77.364c63.016 34.57 135.49 54.292 212.596 54.292C763.07 936.928 960 741.498 960 500.464 960 259.402 763.07 64 520.124 64z m218.724 602.22c-10.348 25.654-57.148 49.066-77.798 50.144-20.628 1.094-21.216 15.988-133.68-32.868-112.45-48.868-180.104-167.688-185.438-175.34-5.338-7.624-43.56-62.094-41.498-116.91 2.076-54.826 32.094-80.692 42.808-91.45 10.702-10.774 22.972-12.704 30.464-12.826 8.856-0.144 14.592-0.264 21.146-0.022 6.548 0.248 16.384-1.37 24.9 21.278 8.512 22.646 28.886 78.306 31.492 83.978 2.604 5.678 4.216 12.252 0.204 19.542-4.024 7.306-6.084 11.87-11.922 18.166-5.87 6.296-12.348 14.084-17.584 18.898-5.84 5.33-11.94 11.144-5.8 22.538 6.136 11.386 27.306 48.712 59.558 79.472 41.45 39.542 77.196 52.658 88.196 58.634 11.03 6.008 17.612 5.34 24.452-1.858 6.808-7.198 29.278-31.492 37.192-42.338 7.91-10.876 15.322-8.746 25.484-4.658 10.156 4.104 64.314 33.112 75.346 39.102 11.02 5.978 18.386 9.058 21.02 13.8 2.634 4.76 1.802 27.062-8.542 52.718z" p-id="2523"></path>
                    </svg>
                    <span>Whatsapp</span>
                </a>
            </li>
            <li>
                <a href="mailto:869241891@qq.com" rel="nofollow">
                    <svg t="1659174738158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4108" width="22" height="22">
                        <path d="M1021.407 146.857L512.645 574.783 3.909 146.857zM0.007 183.402L339.886 471.24 0.007 876.743z" p-id="4109"></path>
                        <path d="M39.354 877.144L363.529 494.4 512.54 616.772l149.274-126.179 324.157 386.551zM1023.993 876.743L684.122 471.24l339.871-287.838z" p-id="4110"></path>
                    </svg>
                    <span>Email</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg t="1677318261567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7556" width="22" height="22">
                        <path d="M853.333333 170.666667H170.666667v85.333333h288L221.866667 571.733333A42.624 42.624 0 0 0 256 640h85.333333v170.666667a42.666667 42.666667 0 0 0 42.666667 42.666666h256a42.666667 42.666667 0 0 0 42.666667-42.666666v-170.666667h85.333333a42.709333 42.709333 0 0 0 34.133333-68.266667L565.333333 256H853.333333V170.666667z m-213.333333 384a42.666667 42.666667 0 0 0-42.666667 42.666666v170.666667h-170.666666v-170.666667a42.666667 42.666667 0 0 0-42.666667-42.666666H341.333333l170.666667-227.541334L682.666667 554.666667h-42.666667z" fill="#ffffff" p-id="7557"></path>
                    </svg>
                    <span>Top</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 桌面端侧边栏导航（优化可见性） -->
    <div class="desktop-sidebar">
        <ul class="row">
            <li>
                <a href="#demo-form" class="popup-with-form" style="cursor: pointer;">
                    <svg t="1677317669124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6548" width="32" height="32">
                        <path d="M804.977778 457.955556C804.977778 284.444444 637.155556 142.222222 429.511111 142.222222 224.711111 142.222222 56.888889 284.444444 56.888889 457.955556c0 76.8 34.133333 150.755556 91.022222 207.644444 8.533333 11.377778 8.533333 73.955556 2.844445 130.844444l-5.688889 48.355556 39.822222-25.6c45.511111-28.444444 102.4-62.577778 119.466667-62.577778 39.822222 11.377778 82.488889 17.066667 125.155555 17.066667 207.644444 0 375.466667-142.222222 375.466667-315.733333zM253.155556 494.933333c-22.755556 0-42.666667-19.911111-42.666667-42.666666s19.911111-42.666667 42.666667-42.666667 42.666667 19.911111 42.666666 42.666666c0 25.6-19.911111 42.666667-42.666666 42.666666z m179.2 0c-22.755556 0-42.666667-19.911111-42.666667-42.666666s19.911111-42.666667 42.666667-42.666667 42.666667 19.911111 42.666666 42.666666c0 25.6-19.911111 42.666667-42.666666 42.666666z m170.666666 0c-22.755556 0-42.666667-19.911111-42.666666-42.666666s19.911111-42.666667 42.666666-42.666667 42.666667 19.911111 42.666667 42.666667c0 25.6-19.911111 42.666667-42.666667 42.666666z" fill="#ffffff" p-id="6549"></path>
                        <path d="M967.111111 534.755556c0-88.177778-42.666667-173.511111-122.311111-233.244445-8.533333-8.533333-22.755556-5.688889-31.288889 2.844445-2.844444 2.844444-2.844444 5.688889-2.844444 8.533333 25.6 45.511111 39.822222 96.711111 39.822222 150.755555 0 170.666667-145.066667 312.888889-335.644445 347.022223-2.844444 2.844444-2.844444 5.688889-2.844444 8.533333-2.844444 11.377778 5.688889 22.755556 19.911111 25.6 62.577778 8.533333 128 5.688889 187.733333-14.222222 17.066667 0 73.955556 34.133333 119.466667 62.577778l39.822222 25.6-5.688889-48.355556c-5.688889-59.733333-5.688889-119.466667 0-130.844444 59.733333-54.044444 93.866667-128 93.866667-204.8z" fill="#ffffff" p-id="6550"></path>
                    </svg>
                    <span>Inquiry</span>
                </a>
            </li>
            <li>
                <a href="https://wa.me/8618037022596" class="whatsapp-link" target="_blank">
                    <svg t="1659174738158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4108" width="32" height="32">
                        <path d="M520.124 64C277.21 64 80.268 259.402 80.268 500.464c0 82.46 23.064 159.58 63.118 225.374L64 960l243.528-77.364c63.016 34.57 135.49 54.292 212.596 54.292C763.07 936.928 960 741.498 960 500.464 960 259.402 763.07 64 520.124 64z m218.724 602.22c-10.348 25.654-57.148 49.066-77.798 50.144-20.628 1.094-21.216 15.988-133.68-32.868-112.45-48.868-180.104-167.688-185.438-175.34-5.338-7.624-43.56-62.094-41.498-116.91 2.076-54.826 32.094-80.692 42.808-91.45 10.702-10.774 22.972-12.704 30.464-12.826 8.856-0.144 14.592-0.264 21.146-0.022 6.548 0.248 16.384-1.37 24.9 21.278 8.512 22.646 28.886 78.306 31.492 83.978 2.604 5.678 4.216 12.252 0.204 19.542-4.024 7.306-6.084 11.87-11.922 18.166-5.87 6.296-12.348 14.084-17.584 18.898-5.84 5.33-11.94 11.144-5.8 22.538 6.136 11.386 27.306 48.712 59.558 79.472 41.45 39.542 77.196 52.658 88.196 58.634 11.03 6.008 17.612 5.34 24.452-1.858 6.808-7.198 29.278-31.492 37.192-42.338 7.91-10.876 15.322-8.746 25.484-4.658 10.156 4.104 64.314 33.112 75.346 39.102 11.02 5.978 18.386 9.058 21.02 13.8 2.634 4.76 1.802 27.062-8.542 52.718z" p-id="2523"></path>
                    </svg>
                    <span>Whatsapp</span>
                </a>
            </li>
            <li>
                <a href="mailto:869241891@qq.com" rel="nofollow">
                    <svg t="1659174738158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4108" width="32" height="32">
                        <path d="M1021.407 146.857L512.645 574.783 3.909 146.857zM0.007 183.402L339.886 471.24 0.007 876.743z" p-id="4109"></path>
                        <path d="M39.354 877.144L363.529 494.4 512.54 616.772l149.274-126.179 324.157 386.551zM1023.993 876.743L684.122 471.24l339.871-287.838z" p-id="4110"></path>
                    </svg>
                    <span>Email</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg t="1677318261567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7556" width="32" height="32">
                        <path d="M853.333333 170.666667H170.666667v85.333333h288L221.866667 571.733333A42.624 42.624 0 0 0 256 640h85.333333v170.666667a42.666667 42.666667 0 0 0 42.666667 42.666666h256a42.666667 42.666667 0 0 0 42.666667-42.666666v-170.666667h85.333333a42.709333 42.709333 0 0 0 34.133333-68.266667L565.333333 256H853.333333V170.666667z m-213.333333 384a42.666667 42.666667 0 0 0-42.666667 42.666666v170.666667h-170.666666v-170.666667a42.666667 42.666667 0 0 0-42.666667-42.666666H341.333333l170.666667-227.541334L682.666667 554.666667h-42.666667z" fill="#ffffff" p-id="7557"></path>
                    </svg>
                    <span>Top</span>
                </a>
            </li>
        </ul>
    </div>
</div>