FY

找回密码
立即注册
搜索
发新帖

593

积分

0

好友

67

主题
发表于 2023-8-13 23:59:37 | 查看: 268| 回复: 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="format-detection" content="telephone=yes"/>
  6.     <title>挪车·电话</title>
  7. </head>
  8. <style>
  9.     .tips {
  10.         /*background-color: #FFF000;*/
  11.         width: 94%;
  12.         height: 100px;
  13.         line-height: 100px;
  14.         margin: 30px auto;
  15.         color: #1296db;
  16.         display: flex;
  17.         font-size: 36px;
  18.         box-sizing: border-box;
  19.     }

  20.     .suona {
  21.         width: 70px;
  22.         height: 70px;
  23.         margin: auto 0;
  24.     }

  25.     .suona svg {
  26.         width: 100%;
  27.         height: 100%;
  28.     }

  29.     .tips .message {
  30.         padding-left: 20px;
  31.     }

  32.     .car_license {
  33.         width: 90%;
  34.         height: 300px;
  35.         line-height: 300px;
  36.         font-size: 120px;
  37.         letter-spacing: 16px;

  38.         color: white;
  39.         background-color: #1e68bb;
  40.         border-radius: 2px;
  41.         border: white 4px solid;
  42.         text-align: center;
  43.         padding: 20px 20px;
  44.         box-shadow: 0 0 8px 8px #1e68bb;
  45.         /*// 外阴影  前两个参数分别是上下和左右偏移  后两个属性依次为模糊距离和阴影尺寸  最后是颜色*/
  46.         margin: 0 auto;
  47.     }

  48.     .owner_message {
  49.         width: 100%;
  50.         height: 100px;
  51.         line-height: 100px;
  52.         text-align: center;
  53.         font-weight: bold;
  54.         font-size: 80px;
  55.         margin-top: 30px;
  56.     }

  57.     .phone {
  58.         width: 100%;
  59.         height: 150px;
  60.         display: flex;
  61.         margin-top: 150px;
  62.         border-top: 2px solid #eee;
  63.         border-bottom: 2px solid #eee;
  64.     }

  65.     .phone .phone_icon {
  66.         width: 15%;
  67.         height: 100%;
  68.     }

  69.     .phone .phone_icon svg {
  70.         width: 80px;
  71.         height: 80px;
  72.         display: block;
  73.         margin: 35px auto;
  74.     }

  75.     .click_text {
  76.         width: 85%;
  77.         height: 100%;
  78.         font-size: 40px;
  79.     }

  80.     .click_phone, .click_tip {
  81.         width: 100%;
  82.         height: 75px;
  83.         line-height: 75px;
  84.         font-weight: bold;
  85.         box-sizing: border-box;
  86.     }

  87.     .click_text .click_tip {
  88.         font-size: 30px;
  89.         color: #8a8a8a;
  90.     }

  91.     .click_arrow {
  92.         width: 5%;
  93.         height: 100%;
  94.         display: flex;
  95.     }

  96.     .click_arrow svg {
  97.         display: block;
  98.         width: 100%;
  99.         height: auto;
  100.         vertical-align: center;
  101.     }

  102.     a {
  103.         color: #2d2e2f;
  104.         outline: none;
  105.         text-decoration: none;
  106.     }

  107. </style>
  108. <body>

  109. <div class="tips">
  110.     <div class="suona">
  111.         <svg t="1680512568946" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
  112.              p-id="2927" width="200" height="200">
  113.             <path
  114.                 d="M330.24 381.44 167.424 381.44c-16.384 0-29.184-13.312-29.184-29.184s13.312-29.184 29.184-29.184l162.816 0c16.384 0 29.184 13.312 29.184 29.184S346.624 381.44 330.24 381.44z"
  115.                 p-id="2928" fill="#1296db"></path>
  116.             <path
  117.                 d="M167.424 562.688c-16.384 0-29.184-13.312-29.184-29.184L138.24 352.256c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184l0 181.248C196.608 549.888 183.808 562.688 167.424 562.688z"
  118.                 p-id="2929" fill="#1296db"></path>
  119.             <path
  120.                 d="M628.736 601.6c-16.384 0-29.184-13.312-29.184-29.184L599.552 210.432c0-1.024 0-2.56 0-3.072 0-2.048-1.536-3.072-3.072-3.072-0.512 0-1.024 0-1.536 0.512-0.512 0.512-1.024 0.512-1.536 1.024L347.136 376.32c-13.312 9.216-31.744 6.144-40.96-7.168-9.216-13.312-6.144-31.744 7.168-40.96l247.808-172.544c1.024-0.512 1.536-1.024 2.56-1.536 9.728-6.144 20.992-9.216 32.256-9.216 33.792 0 61.44 27.648 61.44 61.44 0 0.512 0 1.024 0 2.048 0 0.512 0 0.512 0 1.024l0 362.496C658.432 588.288 645.12 601.6 628.736 601.6z"
  121.                 p-id="2930" fill="#1296db"></path>
  122.             <path
  123.                 d="M330.24 700.928 167.424 700.928c-16.384 0-29.184-13.312-29.184-29.184s13.312-29.184 29.184-29.184l162.816 0c16.384 0 29.184 13.312 29.184 29.184S346.624 700.928 330.24 700.928z"
  124.                 p-id="2931" fill="#1296db"></path>
  125.             <path
  126.                 d="M167.424 700.928c-16.384 0-29.184-13.312-29.184-29.184L138.24 490.496c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184l0 181.248C196.608 687.616 183.808 700.928 167.424 700.928z"
  127.                 p-id="2932" fill="#1296db"></path>
  128.             <path
  129.                 d="M596.48 879.104c-11.776 0-23.04-3.072-32.768-9.216-1.024-0.512-1.536-1.024-2.56-1.536l-247.808-172.544c-13.312-9.216-16.384-27.648-7.168-40.96 9.216-13.312 27.648-16.384 40.96-7.168l246.272 171.52c0.512 0.512 1.024 0.512 1.536 1.024 0.512 0.512 1.536 0.512 1.536 0.512 1.536 0 3.072-1.536 3.072-3.072 0-1.536 0-3.072 0-4.096l0-361.472c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184l0 362.496c0 0.512 0 0.512 0 1.024 0 0.512 0 1.024 0 1.536C658.432 851.456 630.784 879.104 596.48 879.104z"
  130.                 p-id="2933" fill="#1296db"></path>
  131.             <path
  132.                 d="M684.032 650.24c-13.824 0-26.112-9.728-28.672-24.064-3.072-15.872 7.68-31.232 23.552-33.792 38.912-6.656 67.072-40.448 67.072-79.872 0-39.424-28.16-73.216-67.072-79.872-15.872-3.072-26.624-17.92-23.552-33.792 3.072-15.872 17.92-26.624 33.792-23.552 67.072 11.776 115.712 69.632 115.712 137.728 0 68.096-48.64 125.952-115.2 137.728C687.616 650.24 686.08 650.24 684.032 650.24z"
  133.                 p-id="2934" fill="#1296db"></path>
  134.             <path
  135.                 d="M931.328 541.184l-88.064 0c-16.384 0-29.184-13.312-29.184-29.184s13.312-29.184 29.184-29.184l88.064 0c16.384 0 29.184 13.312 29.184 29.184S947.2 541.184 931.328 541.184z"
  136.                 p-id="2935" fill="#1296db"></path>
  137.             <path
  138.                 d="M815.616 261.632c-7.68 0-14.848-3.072-20.48-8.704-11.264-11.264-11.264-30.208 0-41.472l60.416-60.416c11.264-11.264 30.208-11.264 41.472 0 11.264 11.264 11.264 30.208 0 41.472l-60.416 60.416C830.976 258.56 823.296 261.632 815.616 261.632z"
  139.                 p-id="2936" fill="#1296db"></path>
  140.             <path
  141.                 d="M876.032 881.664c-7.68 0-14.848-3.072-20.48-8.704l-60.416-60.416c-11.264-11.264-11.264-30.208 0-41.472s30.208-11.264 41.472 0l60.416 60.416c11.264 11.264 11.264 30.208 0 41.472C891.392 878.592 883.712 881.664 876.032 881.664z"
  142.                 p-id="2937" fill="#1296db"></path>
  143.         </svg>
  144.     </div>
  145.     <div class="message">车主有急事,临时停靠10分钟,马上回来</div>
  146. </div>

  147. <div class="car_license">
  148.     渝A·YY721
  149. </div>

  150. <div class="owner_message">临时停靠,请多关照!</div>

  151. <a href="javascript:call_phone(15823885405) ">

  152.     <div class="phone">
  153.         <div class="phone_icon">
  154.             <svg t="1680512931730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
  155.                  p-id="5553" width="200" height="200">
  156.                 <path
  157.                     d="M737.17551 923.167347c-40.228571 0-86.204082-7.314286-134.269388-22.465306-114.938776-36.04898-228.310204-110.759184-318.693877-210.546939-135.836735-149.942857-201.142857-299.363265-188.081633-432.587755 3.657143-32.914286 14.628571-74.710204 64.261225-108.669388 38.138776-30.302041 81.502041-48.587755 115.461224-47.542857 35.526531 0.522449 48.065306 13.061224 84.636735 66.873469C416.391837 245.55102 420.571429 284.212245 418.481633 306.155102c-3.657143 36.571429-24.032653 52.244898-41.795919 66.35102-4.702041 3.657143-8.881633 6.791837-12.538775 10.44898-21.942857 28.212245-49.110204 66.873469 66.35102 185.991837 98.742857 94.563265 151.510204 106.057143 173.97551 104.489796 17.240816-1.044898 24.555102-10.44898 27.167347-13.583674l0.522449-0.522449c36.571429-51.722449 49.110204-64.261224 84.114286-69.485714 34.481633-5.22449 51.722449 5.22449 124.342857 51.2 65.828571 41.273469 96.130612 68.963265 88.816327 111.804082-2.089796 47.542857-38.138776 111.804082-79.412245 140.538775-28.212245 19.853061-66.873469 29.779592-112.84898 29.779592zM273.240816 142.628571c-18.808163 0-52.244898 9.926531-88.293877 39.183674l-1.044898 1.044898c-33.436735 22.465306-42.840816 48.065306-46.497959 78.889796-11.493878 120.685714 49.632653 259.134694 177.632653 400.195918 138.971429 153.077551 311.379592 219.428571 423.183673 219.428572 37.093878 0 67.395918-7.314286 87.771429-21.420409 33.436735-23.510204 60.604082-78.367347 61.648979-109.191836l0.522449-3.134694c2.089796-12.016327 4.179592-24.032653-70.008163-70.530612-71.053061-44.930612-78.367347-48.065306-95.608163-45.453062-17.763265 2.612245-21.420408 3.134694-56.42449 52.767347l-1.044898 1.044898c-17.763265 22.465306-40.75102 28.734694-56.946939 30.302041-52.767347 4.179592-122.253061-35.004082-206.367347-115.983673l-0.522449-0.522449c-132.179592-135.836735-104.489796-196.440816-68.963265-242.416327l2.612245-2.612245c5.746939-5.22449 10.971429-9.926531 16.718367-14.106122 16.195918-13.061224 24.032653-19.853061 26.122449-37.616327 2.089796-24.032653-15.15102-61.126531-50.677551-110.236735l-0.522449-0.522448c-32.914286-48.587755-36.04898-48.587755-51.2-48.587756-1.044898-0.522449-1.567347-0.522449-2.089796-0.522449z"
  158.                     fill="#2c2c2c" p-id="5554"></path>
  159.             </svg>
  160.         </div>
  161.         <div class="click_text">
  162.             <div class="click_phone">挪车电话
  163.                 <span class="mobile" style="font-size: 24px;color: #8a8a8a;line-height: 40px;display: inline;">15823885405</span>
  164.             </div>
  165.             <div class="click_tip">点击拨打,马上来挪车</div>
  166.         </div>
  167.         <div class="click_arrow">
  168.             <svg t="1680513034871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
  169.                  p-id="8014" width="128" height="128">
  170.                 <path
  171.                     d="M290.909091 983.272727a29.090909 29.090909 0 0 1-20.596364-49.570909L689.92 512l-418.909091-421.701818a29.090909 29.090909 0 0 1 41.309091-40.96l439.505455 442.181818a29.090909 29.090909 0 0 1 0 40.96l-439.505455 442.181818a28.974545 28.974545 0 0 1-21.410909 8.610909z"
  172.                     fill="#8a8a8a" p-id="8015"></path>
  173.             </svg>
  174.         </div>
  175.     </div>

  176. </a>


  177. </body>

  178. <script>
  179.     //默认信息
  180.     var mobile = '15823885405';
  181.     var car_license = '渝A·YY721';

  182.     (function () {
  183.         const car_info = {
  184.             'zhou': {
  185.                 'car_license': '渝A·YY721',
  186.                 'mobile': '15823885405',
  187.             },
  188.             'mao': {
  189.                 'car_license': '渝A·18SZ3',
  190.                 'mobile': '13251360348',
  191.             }
  192.         }

  193.         var user = '';

  194.         var arrList = window.location.search.substr(1).split('&')
  195.         arrList.forEach(function (item) {
  196.             var arr = item.split('=')
  197.             if (arr[0] == 'user') {
  198.                 user = window.decodeURIComponent(arr[1])
  199.             }
  200.         })
  201.         if (user == '') {
  202.             user = 'zhou';
  203.         }

  204.         for (var key in car_info) {
  205.             if (key == user) {
  206.                 mobile = car_info[key].mobile;
  207.                 car_license = car_info[key].car_license;
  208.             }
  209.         }
  210.         document.querySelector('.car_license').innerHTML = car_license;
  211.         document.querySelector('.mobile').innerHTML = mobile;

  212.     }());

  213.     function call_phone() {
  214.         window.location.href = 'tel://' + mobile;
  215.     }
  216. </script>

  217. </html>
复制代码

原文链接
您需要登录后才可以回帖 登录 | 立即注册

QQ|Archiver|手机版|小黑屋|fatsky

GMT+8, 2024-7-17 17:04 , Processed in 0.043303 second(s), 28 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表