1b.png.html
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>法务小超人</title> 7 <style> 8 body { 9 margin: 0; 10 font-family: Arial, sans-serif; 11 } 12 .container { 13 text-align: center; 14 background-color: #f8f8f8; 15 padding: 10px; 16 } 17 .header { 18 display: flex; 19 justify-content: space-between; 20 align-items: center; 21 padding: 10px 20px; 22 background-color: #fff; 23 border-bottom: 1px solid #e6e6e6; 24 } 25 .header img { 26 height: 24px; 27 } 28 .header .menu-icons { 29 display: flex; 30 gap: 10px; 31 } 32 .header .menu-icons img { 33 height: 24px; 34 } 35 .search-section { 36 background-image: url('background-image.jpg'); /* Replace with actual background image */ 37 background-size: cover; 38 color: white; 39 padding: 40px 20px; 40 } 41 .search-section h1 { 42 margin: 0; 43 font-size: 24px; 44 } 45 .search-input { 46 margin: 20px 0; 47 display: flex; 48 justify-content: center; 49 } 50 .search-input input { 51 width: 300px; 52 padding: 10px; 53 border-radius: 5px 0 0 5px; 54 border: none; 55 } 56 .search-input button { 57 padding: 10px 20px; 58 border-radius: 0 5px 5px 0; 59 border: none; 60 background-color: #007BFF; 61 color: white; 62 cursor: pointer; 63 } 64 .search-result-count { 65 margin: 10px 0; 66 } 67 .qa-section { 68 background-color: #fff; 69 padding: 20px; 70 margin-top: -20px; 71 border-top-left-radius: 20px; 72 border-top-right-radius: 20px; 73 box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); 74 } 75 .qa-item { 76 display: flex; 77 justify-content: space-between; 78 padding: 15px 0; 79 border-bottom: 1px solid #e6e6e6; 80 } 81 .qa-item:last-child { 82 border-bottom: none; 83 } 84 .qa-item a { 85 text-decoration: none; 86 color: #333; 87 } 88 .qa-item img { 89 height: 20px; 90 } 91 .footer { 92 display: flex; 93 justify-content: space-around; 94 background-color: #fff; 95 border-top: 1px solid #e6e6e6; 96 padding: 10px 0; 97 position: fixed; 98 width: 100%; 99 bottom: 0; 100 } 101 .footer img { 102 height: 24px; 103 } 104 </style> 105 </head> 106 <body> 107 <div class="container"> 108 <div class="header"> 109 <div class="logo"> 110 <img src="logo.png" alt="法务小超人"> <!-- Replace with actual logo --> 111 </div> 112 <div class="menu-icons"> 113 <img src="menu-icon.png" alt="Menu"> <!-- Replace with actual menu icon --> 114 <img src="more-icon.png" alt="More"> <!-- Replace with actual more icon --> 115 </div> 116 </div> 117 <div class="search-section"> 118 <h1>法律意见查询</h1> 119 <div class="search-input"> 120 <input type="text" placeholder="输入国家名查询法律意见"> 121 <button> 122 <img src="search-icon.png" alt="Search"> <!-- Replace with actual search icon --> 123 </button> 124 </div> 125 <div class="search-result-count"> 126 已收录法律意见8394篇 127 </div> 128 </div> 129 <div class="qa-section"> 130 <h2>法务 Q&A</h2> 131 <div class="qa-item"> 132 <a href="#">国际法务接口人</a> 133 <img src="arrow.png" alt="Arrow"> <!-- Replace with actual arrow icon --> 134 </div> 135 <div class="qa-item"> 136 <a href="#">国内法务接口人</a> 137 <img src="arrow.png" alt="Arrow"> <!-- Replace with actual arrow icon --> 138 </div> 139 <div class="qa-item"> 140 <a href="#">国际法律协议合同办理指引</a> 141 <img src="arrow.png" alt="Arrow"> <!-- Replace with actual arrow icon --> 142 </div> 143 <div class="qa-item"> 144 <a href="#">国内法律协议合同办理指引</a> 145 <img src="arrow.png" alt="Arrow"> <!-- Replace with actual arrow icon --> 146 </div> 147 </div> 148 <div class="footer"> 149 <div class="footer-item"> 150 <img src="home-icon.png" alt="首页"> <!-- Replace with actual home icon --> 151 <div>首页</div> 152 </div> 153 <div class="footer-item"> 154 <img src="template-icon.png" alt="模板"> <!-- Replace with actual template icon --> 155 <div>模板</div> 156 </div> 157 <div class="footer-item"> 158 <img src="my-icon.png" alt="我的"> <!-- Replace with actual my icon --> 159 <div>我的</div> 160 </div> 161 </div> 162 </div> 163 </body> 164 </html>