只要玫瑰不要命 2023-09-12 19:25 采纳率: 66.7%
浏览 21
已结题

写一下这个页面 急需要代码

img


只需要写完表面的不需要完全写完写多少算多，。1112谢谢你啦

  • 写回答

2条回答 默认 最新

  • 奋斗的小杨 2023-09-12 19:41
    关注

    以下是一个简单的订单管理页面的示例代码，使用HTML和CSS实现了订单选项卡和订单预览功能：

    <!DOCTYPE html>
<html>
<head>
  <title>订单管理</title>
  <style>
    /* 样式设置 */
    .tab {
      display: flex;
    }
    
    .tab button {
      background-color: #f2f2f2;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 10px 20px;
      transition: background-color 0.3s;
    }
    
    .tab button.active {
      background-color: #ccc;
    }
    
    .order-preview {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'all')">全部</button>
    <button class="tablinks" onclick="openTab(event, 'pending')">待拍摄</button>
    <button class="tablinks" onclick="openTab(event, 'ongoing')">进行中</button>
    <button class="tablinks" onclick="openTab(event, 'completed')">已完成</button>
    <button class="tablinks" onclick="openTab(event, 'closed')">已关闭</button>
  </div>

  <div id="all" class="tabcontent">
    <h2>全部订单</h2>
    <div class="order-preview">
      <h3>订单号: 123456</h3>
      <p>证件照: 身份证</p>
      <p>证件照名称: 张三</p>
      <p>证件照加个: 无</p>
      <p>预约拍摄信息: 2023年9月15日 10:00</p>
      <p>拍摄门店: A店</p>
      <p>到店时间: 2023年9月15日 09:30</p>
      <p>发票服务: 是</p>
      <p>实付款: $100</p>
    </div>
    <!-- 其他订单预览 -->
  </div>

  <div id="pending" class="tabcontent">
    <h2>待拍摄订单</h2>
    <!-- 待拍摄订单预览 -->
  </div>

  <div id="ongoing" class="tabcontent">
    <h2>进行中订单</h2>
    <!-- 进行中订单预览 -->
  </div>

  <div id="completed" class="tabcontent">
    <h2>已完成订单</h2>
    <!-- 已完成订单预览 -->
  </div>

  <div id="closed" class="tabcontent">
    <h2>已关闭订单</h2>
    <!-- 已关闭订单预览 -->
  </div>

  <script>
    // 切换选项卡
    function openTab(evt, tabName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>
</body>
</html>

    这段代码创建了一个订单管理页面，其中包括订单选项卡和订单预览部分。通过点击不同的选项卡按钮，可以切换显示不同状态的订单。订单预览部分展示了一条订单的详细信息，包括开发票、订单号、证件照等内容。你可以根据实际需求修改和完善代码。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 9月20日
  • 已采纳回答 9月12日
  • 修改了问题 9月12日
  • 创建了问题 9月12日