FY

找回密码
立即注册
搜索
FY»论坛 › 我的个人论坛版博客 › PC › 挪车电话
发新帖
fatsky

585

积分

0

好友

67

主题

挪车电话

发表于 2023-8-13 23:59:37 | 查看: 127| 回复: 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.     }

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

  27.     .suona svg {
  28.         width: 100%;
  29.         height: 100%;
  30.     }

  32.     .tips .message {
  33.         padding-left: 20px;
  34.     }

  36.     .car_license {
  37.         width: 90%;
  38.         height: 300px;
  39.         line-height: 300px;
  40.         font-size: 120px;
  41.         letter-spacing: 16px;

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

  54.     .owner_message {
  55.         width: 100%;
  56.         height: 100px;
  57.         line-height: 100px;
  58.         text-align: center;
  59.         font-weight: bold;
  60.         font-size: 80px;
  61.         margin-top: 30px;
  62.     }

  64.     .phone {
  65.         width: 100%;
  66.         height: 150px;
  67.         display: flex;
  68.         margin-top: 150px;
  69.         border-top: 2px solid #eee;
  70.         border-bottom: 2px solid #eee;
  71.     }

  73.     .phone .phone_icon {
  74.         width: 15%;
  75.         height: 100%;
  76.     }

  78.     .phone .phone_icon svg {
  79.         width: 80px;
  80.         height: 80px;
  81.         display: block;
  82.         margin: 35px auto;
  83.     }

  85.     .click_text {
  86.         width: 85%;
  87.         height: 100%;
  88.         font-size: 40px;
  89.     }

  91.     .click_phone, .click_tip {
  92.         width: 100%;
  93.         height: 75px;
  94.         line-height: 75px;
  95.         font-weight: bold;
  96.         box-sizing: border-box;
  97.     }

  99.     .click_text .click_tip {
  100.         font-size: 30px;
  101.         color: #8a8a8a;
  102.     }

  104.     .click_arrow {
  105.         width: 5%;
  106.         height: 100%;
  107.         display: flex;
  108.     }

  110.     .click_arrow svg {
  111.         display: block;
  112.         width: 100%;
  113.         height: auto;
  114.         vertical-align: center;
  115.     }

  117.     a {
  118.         color: #2d2e2f;
  119.         outline: none;
  120.         text-decoration: none;
  121.     }

  123. </style>
  124. <body>

  126. <div class="tips">
  127.     <div class="suona">
  128.         <svg t="1680512568946" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
  129.              p-id="2927" width="200" height="200">
  130.             <path
  131.                 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"
  132.                 p-id="2928" fill="#1296db"></path>
  133.             <path
  134.                 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"
  135.                 p-id="2929" fill="#1296db"></path>
  136.             <path
  137.                 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"
  138.                 p-id="2930" fill="#1296db"></path>
  139.             <path
  140.                 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"
  141.                 p-id="2931" fill="#1296db"></path>
  142.             <path
  143.                 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"
  144.                 p-id="2932" fill="#1296db"></path>
  145.             <path
  146.                 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"
  147.                 p-id="2933" fill="#1296db"></path>
  148.             <path
  149.                 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"
  150.                 p-id="2934" fill="#1296db"></path>
  151.             <path
  152.                 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"
  153.                 p-id="2935" fill="#1296db"></path>
  154.             <path
  155.                 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"
  156.                 p-id="2936" fill="#1296db"></path>
  157.             <path
  158.                 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"
  159.                 p-id="2937" fill="#1296db"></path>
  160.         </svg>
  161.     </div>
  162.     <div class="message">车主有急事，临时停靠10分钟，马上回来</div>
  163. </div>

  165. <div class="car_license">
  166.     渝A·YY721
  167. </div>

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

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

  173.     <div class="phone">
  174.         <div class="phone_icon">
  175.             <svg t="1680512931730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
  176.                  p-id="5553" width="200" height="200">
  177.                 <path
  178.                     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"
  179.                     fill="#2c2c2c" p-id="5554"></path>
  180.             </svg>
  181.         </div>
  182.         <div class="click_text">
  183.             <div class="click_phone">挪车电话
  184.                 <span class="mobile" style="font-size: 24px;color: #8a8a8a;line-height: 40px;display: inline;">15823885405</span>
  185.             </div>
  186.             <div class="click_tip">点击拨打，马上来挪车</div>
  187.         </div>
  188.         <div class="click_arrow">
  189.             <svg t="1680513034871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
  190.                  p-id="8014" width="128" height="128">
  191.                 <path
  192.                     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"
  193.                     fill="#8a8a8a" p-id="8015"></path>
  194.             </svg>
  195.         </div>
  196.     </div>

  198. </a>


  201. </body>

  203. <script>
  204.     //默认信息
  205.     var mobile = '15823885405';
  206.     var car_license = '渝A·YY721';

  208.     (function () {
  209.         const car_info = {
  210.             'zhou': {
  211.                 'car_license': '渝A·YY721',
  212.                 'mobile': '15823885405',
  213.             },
  214.             'mao': {
  215.                 'car_license': '渝A·18SZ3',
  216.                 'mobile': '13251360348',
  217.             }
  218.         }

  220.         var user = '';

  222.         var arrList = window.location.search.substr(1).split('&')
  223.         arrList.forEach(function (item) {
  224.             var arr = item.split('=')
  225.             if (arr[0] == 'user') {
  226.                 user = window.decodeURIComponent(arr[1])
  227.             }
  228.         })
  229.         if (user == '') {
  230.             user = 'zhou';
  231.         }

  233.         for (var key in car_info) {
  234.             if (key == user) {
  235.                 mobile = car_info[key].mobile;
  236.                 car_license = car_info[key].car_license;
  237.             }
  238.         }
  239.         document.querySelector('.car_license').innerHTML = car_license;
  240.         document.querySelector('.mobile').innerHTML = mobile;

  242.     }());

  244.     function call_phone() {
  245.         window.location.href = 'tel://' + mobile;
  246.     }
  247. </script>

  249. </html>
复制代码

原文链接
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

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

GMT+8, 2024-5-18 23:59 , Processed in 0.039447 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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