Skip to content

李宁 / Activity

Go to a project
Commit 110a8295 by 李宁
Options

1

1 parent 31d47dbb
Expand all
Inline Side-by-side
Showing 13 changed files with 671 additions and 0 deletions
.claude/settings.local.json 0 → 100644
{
"permissions": {
"allow": [
"Bash(claude mcp add:*)",
"Bash(claude:*)"
]
}
}
networkError/css/result.css 0 → 100644
/* Reuse basic reset from style.css or duplicate */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: 'PingFang SC', 'Source Han Sans CN', sans-serif;
background-color: #fff;
overflow-x: hidden;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1.68rem;
/* 84px - adjust as needed */
}
.result-content {
width: 5.8rem;
/* 290px */
display: flex;
flex-direction: column;
align-items: center;
}
.success-icon {
width: 1.28rem;
/* 64px */
height: 1.28rem;
margin-bottom: 0.48rem;
/* 24px */
}
.result-title {
font-size: 0.4rem;
/* 20px */
color: #333;
font-weight: 500;
margin-bottom: 0.28rem;
/* 34px */
}
.result-desc {
font-size: 0.32rem;
/* 16px - Figma doesn't explicitly state but looks like body text */
color: #666;
/* Dark gray */
line-height: 1.6;
text-align: center;
/* Figma alignment looked left or justified */
}
.footer {
margin-top: .64rem;
/* Spacing before button */
display: flex;
justify-content: center;
width: 100%;
}
.exit-btn {
width: 3.8rem;
/* 190px */
height: 0.88rem;
/* 44px */
background: #568FFE;
border-radius: 0.44rem;
/* Pill shape? or 4px? Home button was 4px. Use 4px (0.08rem) */
border-radius: 0.08rem;
color: #fff;
font-size: 0.34rem;
/* 17px */
cursor: pointer;
border: none;
}
.exit-btn:active {
background: #f5f5f5;
}
\ No newline at end of file \ No newline at end of file
networkError/css/style.css 0 → 100644
/* Reset and Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: 'PingFang SC', 'Source Han Sans CN', sans-serif;
background-color: #fff;
overflow-x: hidden;
}
/* Container */
.container {
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Top Image */
.top-section {
width: 100%;
margin-top: 1.4rem;
/* Adjust as needed */
}
.error-img {
width: 100%;
/* Assuming full width or specific size */
max-width: 100%;
height: auto;
display: block;
}
/* Description Text */
.description {
width: 5.64rem;
/* 282px / 50 */
margin: 0 auto;
/* Adjust based on visual */
font-size: 0.32rem;
/* 16px */
color: #666;
line-height: 0.56rem;
/* 28px */
text-align: center;
}
.highlight {
color: #568ffe;
font-weight: 500;
}
/* Submit Button */
.submit-btn-container {
margin-top: 1.3rem;
/* Adjust positioning */
display: flex;
justify-content: center;
width: 100%;
}
.submit-btn {
width: 3.6rem;
/* 180px */
height: 0.88rem;
/* 44px */
background: linear-gradient(90deg, rgb(86, 143, 254) 0%, rgb(86, 143, 254) 100%), linear-gradient(101.5deg, rgb(1, 237, 253) 0.4%, rgb(1, 118, 245) 100%);
border-radius: 0.08rem;
/* 4px */
border: none;
color: white;
font-size: 0.32rem;
/* 16px */
font-weight: 500;
/* PingFang SC Medium */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.submit-btn:active {
opacity: 0.9;
}
/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
}
.modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
width: 5.6rem;
/* 280px */
background: #fff;
border-radius: 0.16rem;
/* 8px? Guessing */
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.modal-title {
margin-top: 0.48rem;
/* 24px approx */
font-size: 0.36rem;
/* 18px */
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 0.4rem;
}
.input-group {
width: 100%;
padding: 0 0.4rem;
/* spacing for input */
margin-bottom: 0.4rem;
display: flex;
justify-content: space-between;
/* Space out input and image */
align-items: center;
}
#captchaInput {
flex: 1;
/* Take remaining space */
height: 0.8rem;
/* 40px */
background: #f5f5f5;
/* Light gray bg */
border: 1px solid #ddd;
border-radius: 0.08rem;
padding-left: 0.2rem;
font-size: 0.28rem;
outline: none;
margin-right: 0.2rem;
/* Gap between input and image */
}
/* .captcha-row removed */
.captcha-img {
width: 1.6rem;
/* 80px */
height: .8rem;
/* 32px */
background: #eee;
cursor: pointer;
flex-shrink: 0;
/* Prevent shrinking */
}
/* .refresh-text removed */
/* Modal Footer */
.modal-footer {
width: 4.96rem;
/* 248px */
height: 0.88rem;
/* 44px */
display: flex;
justify-content: space-between;
margin-bottom: 0.4rem;
}
.modal-btn {
width: 2.4rem;
/* 120px */
height: 0.88rem;
/* 44px */
border-radius: 0.08rem;
font-size: 0.32rem;
/* 16px */
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.cancel {
background: #f5f5f5;
color: #666;
margin-right: 0.16rem;
/* 8px */
}
.confirm {
background: #568ffe;
/* Button color */
color: white;
}
\ No newline at end of file \ No newline at end of file
networkError/index.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>无法质检申请</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/util.js"></script>
</head>
<body>
<div class="container">
<!-- Top Image -->
<div class="top-section">
<img src="error.png" alt="Error" class="error-img">
</div>
<!-- Description Text -->
<div class="description">
由于当前网络原因，暂时无法质检，为避免耽误您的工作进度，您可以点击下方按钮“<span class="highlight">提交无法质检申请</span>”。
</div>
<!-- Submit Button -->
<div class="submit-btn-container">
<button id="submitBtn" class="submit-btn">提交无法质检申请</button>
</div>
<!-- Bottom Link (Optional based on design) -->
<!-- <div class="bottom-link">
<span>工单未同步?</span> <span class="blue-text">查看 解决方法</span>
</div> -->
</div>
<!-- Modal -->
<div id="captchaModal" class="modal" style="display: none;">
<div class="modal-mask"></div>
<div class="modal-content">
<div class="modal-title">请输入图形验证码</div>
<div class="input-group">
<input type="text" id="captchaInput" placeholder="输入图形验证码">
<img id="captchaImg" src="" alt="验证码" class="captcha-img">
</div>
<div class="modal-footer">
<button id="cancelBtn" class="modal-btn cancel">取消</button>
<button id="confirmBtn" class="modal-btn confirm">确认</button>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
networkError/js/index.js 0 → 100644
// REM Calculation
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // Base 750 design
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
$(function () {
// DOM Elements
const $submitBtn = $('#submitBtn');
const $modal = $('#captchaModal');
const $cancelBtn = $('#cancelBtn');
const $confirmBtn = $('#confirmBtn');
const $captchaInput = $('#captchaInput');
const $captchaImg = $('#captchaImg');
// API URLs (Mock placeholders)
const API_CAPTCHA = '/api/getCaptcha'; // Replace with actual URL
const API_SUBMIT = '/api/submitApplication'; // Replace with actual URL
// 1. Open Modal
$submitBtn.on('click', function () {
$modal.fadeIn(200);
$modal.css('display', 'flex'); // Ensure flex for centering
loadCaptcha();
});
// 2. Close Modal
$cancelBtn.on('click', function () {
closeModal();
});
function closeModal() {
$modal.fadeOut(200);
$captchaInput.val('');
}
// 3. Load Captcha
function loadCaptcha() {
// Implement logic to fetch captcha
// Example: httpRequest({ url: ... }).then(res => setsrc)
// Since user said "random image placeholder", we use a placeholder or mock implementation.
// If httpRequest uses util.js, verify signature. assuming util provides valid promise or callback.
// Mocking the behavior
// const randomId = Math.random();
// $captchaImg.attr('src', 'https://via.placeholder.com/80x32?text=' + Math.floor(randomId * 1000));
// Real implementation using httpRequest if available:
/*
httpRequest({
url: API_CAPTCHA,
type: 'GET',
success: function(res) {
if(res.code === 200) {
$captchaImg.attr('src', res.data.img); // Adjust based on response structure
}
}
});
*/
// For now, use a static placeholder as requested "random image"
$captchaImg.attr('src', 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSIzMiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NjYyIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkeT0iLjNlbSIgZm9udC1zaXplPSIxMiIgZm9udC1mYW1pbHk9ImFyaWFsIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjMzMzIj5DYXB0Y2hhPC90ZXh0Pjwvc3ZnPg==');
}
$captchaImg.on('click', loadCaptcha);
// 4. Confirm Submit
$confirmBtn.on('click', function () {
const captchaVal = $captchaInput.val().trim();
if (!captchaVal) {
alert('请输入验证码');
return;
}
// Call Submit API
// httpRequest({
// url: API_SUBMIT,
// data: { captcha: captchaVal },
// type: 'POST',
// success: function(res) {
// if (res.code === '0') { // Check success code
// window.location.href = 'result.html';
// } else {
// alert(res.msg || '提交失败');
// }
// },
// error: function() {
// alert('网络错误');
// }
// });
// Mock Success for dev
console.log('Submitting with code:', captchaVal);
// Simulate API call
setTimeout(() => {
// Assume success
window.location.href = 'result.html';
}, 500);
});
});
networkError/js/result.js 0 → 100644
// REM Calculation
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
$(function () {
$('#exitBtn').on('click', function () {
// Go back
// history.back();
// Or if strictly "Exit to QC", maybe window.close() or bridge, but history.back() is safest for web.
history.back();
});
});
networkError/js/util.js 0 → 100644
(function(){
'use strict';
let utils=function(){}
let blackId = ''
let origin = window.location.origin
if(origin.includes('localhost')>0 || origin=='null' || origin.includes('file:')>0){
origin = 'https://testznzl.lgyzpt.com'
}
utils.prototype={
/**
* 获取地址栏后边的参数
*/
getUrlParam:function(m) {
let reg = new RegExp('(^|&)' + m + '=([^&]*)(&|$)')
let r = window.location.href.split('?')
r = r.length === 1 ? null : r[1].match(reg)
if (r == null) return ''
return decodeURIComponent(r[2]).replace(/(#|wechat_redirect|\/[0-9a-zA-Z]*)*/g, '')
},
/**
* 判断设备是Android还是iPhone
*/
androidOrIphone: function () {
var system = window.navigator.userAgent.toLowerCase();
if (system.indexOf("iphone") >= 0 || system.indexOf("ipad") >= 0 || system.indexOf("mac") >= 0 || system.indexOf("ipod") >= 0) {
return false;
}
return true;
},
/**
* 黑框提示
*/
toast: function (str) {
if (document.getElementById("blackDiv")) {
document.getElementById("blackSpan").innerHTML = str;
} else {
var blackDiv = document.createElement("div");
blackDiv.id = "blackDiv";
blackDiv.className = "blackts";
blackDiv.style.position = "fixed";
blackDiv.style.left = "0";
blackDiv.style.bottom = "20%";
blackDiv.style.width = "100%";
blackDiv.style.textAlign = "center";
blackDiv.style.zIndex = "999999";
blackDiv.style.display = 'flex'
blackDiv.style.justifyContent = 'center'
var html = '<div id="blackSpan" style="background: rgba(42,45,50,.94);color: white;';
html += 'border-radius: .1rem;font-size: 0.32rem;padding: .2rem .6rem;max-width: 80%;line-height: 1.5;">';
html += str + '</div>';
blackDiv.innerHTML = html;
document.getElementsByTagName("body")[0].appendChild(blackDiv);
}
if (blackId && blackId != "") {
clearTimeout(blackId);
}
blackId = setTimeout(function () {
if (document.getElementById("blackDiv")) {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("blackDiv"));
}
}, 3000);
},
/**
* zhijian/ha
*
*/
httpRequest:function(param){
let middle = param.public?'/zhijian/common':'/zhijian/ha'
return new Promise(function(resolve, reject){
axios ({
method: 'post',
url:origin + middle + param.url,
timeout: param.time||15000,
data:param.data,
headers: {
'Content-Type': 'application/json'
}
}).then((res) => {
resolve(res.data)
}).catch(res => {
reject(res)
})
})
},
}
window.publicMethod = utils
})()
\ No newline at end of file \ No newline at end of file
networkError/propmt.md 0 → 100644
你是一个资深的前端开发，请根据图片开发相应的前端页面，实现包括页面展示，以及点击弹窗，点击跳转的功能，具体实现要求如下：
一、技术栈
1、页面开发采用html+css+js，其中css采用rem实现自适应大小，js事件监听以采用jquery，接口请求直接采用目录‘js/util.js’中的的httpRequest，所以页面中需要引入目录‘js/util.js’下的jquery.min.js，util.js，axios.min.js
2、css采用外部引入方式，css文件放入css目录中
3、js采用外部引入方式，js文件放入js目录中
二、页面开发具体流程
1、首页设计图的figma地址(https://www.figma.com/design/HvcLCsedugBopx6zINH0BF/%E6%B1%9F%E8%8B%8F%E7%A7%BB%E5%8A%A8%E8%B4%A8%E6%A3%80?node-id=3154-2822&m=dev)，请严格按照设计图开发，此页面顶部引入图片error.png即可，不需要绘画
2、点击底部按钮“提交无法质检申请”，需要弹窗，弹窗设计图figma地址(https://www.figma.com/design/HvcLCsedugBopx6zINH0BF/%E6%B1%9F%E8%8B%8F%E7%A7%BB%E5%8A%A8%E8%B4%A8%E6%A3%80?node-id=3155-2678&m=dev)，请严格按照设计图开发，弹窗中的图形验证码是需要请求接口去获得（可以暂时先随便一张图片占位开发
3、点击弹窗中的“取消”，关掉弹窗，并清楚输入框内容，点击“确认”，进行接口提交，如果接口返回成功，则跳转成功页面
4、成功页面设计图figma地址(https://www.figma.com/design/HvcLCsedugBopx6zINH0BF/%E6%B1%9F%E8%8B%8F%E7%A7%BB%E5%8A%A8%E8%B4%A8%E6%A3%80?node-id=3155-2782&m=dev)，此页面顶部引入图片success.png即可，不需要绘画，点击底部“退出质检”，进行页面回退即可
页面优化
一、首页index.html
1、弹框中，输入框和验证码保持一行，“看不清?换一张”不要了
二、结果页面result.html
1、页面整体内容，不是上下剧中，具体参考设计图result.png
http://127.0.0.1:3845/mcp
claude mcp add --transport http figma-dev-mode-mcp-server http://127.0.0.1:3845/mcp
\ No newline at end of file \ No newline at end of file
networkError/result.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>提交成功</title>
<link rel="stylesheet" href="css/result.css">
<script src="js/jquery.min.js"></script>
<script src="js/util.js"></script>
</head>
<body>
<div class="container">
<!-- Center Content -->
<div class="result-content">
<img src="success.png" alt="Success" class="success-icon">
<div class="result-title">提交成功</div>
<div class="result-desc">
申请已提交，平台正在加紧为您处理,处理完成后，我们会在第一时间通过
</div>
<div class="result-desc">
支撑群消息通知，届时您可进入APP页面执行回单操作。
</div>
</div>
<!-- Button -->
<div class="footer">
<button id="exitBtn" class="exit-btn">退出质检</button>
</div>
</div>
<script src="js/result.js"></script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!