File size: 3,222 Bytes
c6e4a8b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>云电脑 - 一只猫的小家</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
body {
background: linear-gradient(to bottom right, #fde2e4, #e2dafa, #d7f0e6);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 0;
}
.container {
width: 90%;
max-width: 800px;
background: rgba(255, 255, 255, 0.92);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 2.5rem;
margin-bottom: 2rem;
}
.title {
font-size: 2rem;
color: #2d3748;
text-align: center;
margin-bottom: 2rem;
position: relative;
}
.title::after {
content: "";
display: block;
width: 80px;
height: 3px;
background-color: #e2a8c0;
margin: 0.8rem auto 0;
border-radius: 3px;
}
.pc-spec {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.spec-card {
background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
border-radius: 12px;
padding: 1.5rem;
color: white;
text-align: center;
}
.spec-card h3 {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.connect-btn {
padding: 1rem 2rem;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
color: white;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
margin: 1rem 0;
}
.connect-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(248, 187, 208, 0.3);
}
.back-btn {
display: inline-block;
margin: 1rem auto 0;
padding: 0.8rem 1.8rem;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
color: white;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.back-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(248, 187, 208, 0.3);
}
.center {
text-align: center;
}
.tips {
color: #718096;
font-size: 0.9rem;
margin-top: 1rem;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h2 class="title">☁️云电脑</h2>
<p style="text-align:center; color:#718096; margin-bottom:1rem;">随时随地使用高性能云电脑~</p>
<div class="pc-spec">
<div class="spec-card">
<h3>基础配置</h3>
<p>CPU:4核</p>
<p>内存:8GB</p>
<p>存储:100GB</p>
</div>
<div class="spec-card">
<h3>进阶配置</h3>
<p>CPU:8核</p>
<p>内存:16GB</p>
<p>存储:500GB</p>
</div>
<div class="spec-card">
<h3>高端配置</h3>
<p>CPU:16核</p>
<p>内存:32GB</p>
<p>存储:1TB</p>
</div>
</div>
<div class="center">
<button class="connect-btn">连接云电脑</button>
<p class="tips">提示:连接前请确保网络稳定,建议使用5G/WiFi网络</p>
<br>
<a href="index.html" class="back-btn">返回主页</a>
</div>
</div>
</body>
</html> |