<style>
.size-chart-container {
max-width: 100%;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #222;
}
.unit-toggle {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
}
.unit-toggle span {
padding: 0 12px;
cursor: pointer;
color: #b8b8c2;
}
.unit-toggle .active-unit {
color: #9e8b8e;
font-weight: 500;
}
.size-table-wrapper {
border: 1px solid #e6e6e6;
border-radius: 8px;
overflow: hidden;
overflow-x: auto;
}
.size-table {
width: 100%;
min-width: 900px;
border-collapse: collapse;
background:#fff;
}
.size-table th,
.size-table td {
padding: 16px 8px;
text-align: center;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
}
.size-table th {
background-color: #ffffff;
font-weight: 600;
}
.size-table td:first-child {
font-weight: 600;
font-size: 17px;
}
.region-select {
border: 1px solid #ddd;
padding: 6px 10px;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
background: #fff;
}
.size-notice {
margin-top: 26px;
font-size: 14px;
line-height: 1.7;
text-align: center;
color:#555;
}
.measure-guide {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
}
.measure-guide h4 {
margin: 0 0 12px;
font-size: 16px;
}
.measure-guide img {
max-width: 100%;
display: block;
margin: 0 auto;
border-radius: 6px;
}
</style>
<div class="size-chart-container">
<!-- 单位切换 -->
<div class="unit-toggle">
<span class="active-unit" id="cmBtn">CENTIMETERS</span>
<span>|</span>
<span id="inchBtn">INCHES</span>
</div>
<!-- 厘米表格 默认显示 -->
<div id="cmBox" class="size-table-wrapper">
<table class="size-table">
<thead>
<tr>
<th>Brand Size</th>
<th>
<select class="region-select">
<option value="US" selected>US</option>
<option value="CA">CA</option>
<option value="UK">UK</option>
<option value="EU">EU</option>
</select>
</th>
<th>Bust (cm)</th>
<th>Waist (cm)</th>
<th>Hip (cm)</th>
<th>Length (cm)</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td data-sizekey="S">4-6</td>
<td>85</td>
<td>66</td>
<td>93</td>
<td>145</td>
</tr>
<tr>
<td>M</td>
<td data-sizekey="M">8-10</td>
<td>90</td>
<td>71</td>
<td>98</td>
<td>146</td>
</tr>
<tr>
<td>L</td>
<td data-sizekey="L">12-14</td>
<td>95</td>
<td>76</td>
<td>103</td>
<td>147</td>
</tr>
<tr>
<td>XL</td>
<td data-sizekey="XL">16-18</td>
<td>100</td>
<td>82</td>
<td>108</td>
<td>148</td>
</tr>
</tbody>
</table>
</div>
<!-- 英寸表格 默认隐藏 -->
<div id="inchBox" class="size-table-wrapper" style="display: none;">
<table class="size-table">
<thead>
<tr>
<th>Brand Size</th>
<th>
<select class="region-select">
<option value="US" selected>US</option>
<option value="CA">CA</option>
<option value="UK">UK</option>
<option value="EU">EU</option>
</select>
</th>
<th>Bust (in)</th>
<th>Waist (in)</th>
<th>Hip (in)</th>
<th>Length (in)</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td data-sizekey="S">4-6</td>
<td>33.5</td>
<td>26.0</td>
<td>36.6</td>
<td>57.1</td>
</tr>
<tr>
<td>M</td>
<td data-sizekey="M">8-10</td>
<td>35.4</td>
<td>28.0</td>
<td>38.6</td>
<td>57.5</td>
</tr>
<tr>
<td>L</td>
<td data-sizekey="L">12-14</td>
<td>37.4</td>
<td>29.9</td>
<td>40.6</td>
<td>57.9</td>
</tr>
<tr>
<td>XL</td>
<td data-sizekey="XL">16-18</td>
<td>39.4</td>
<td>32.3</td>
<td>42.5</td>
<td>58.3</td>
</tr>
</tbody>
</table>
</div>
<!-- 尺码误差提示 -->
<div class="size-notice">
Measurements are taken manually and may vary by 1–2 cm. Please check the size chart carefully before ordering.<br>
1 inch = 2.54 centimeters
</div>
<!-- 身体测量指引区域 -->
<div class="measure-guide">
<h4>How To Measure Yourself</h4>
<img src="https://cdn.shopify.com/s/files/1/0805/5678/5909/files/Size_Guide_j.png?v=1780900288" alt="Measurement Guide">
</div>
</div>
<script>
// 厘米/英寸切换逻辑
const cmBtn = document.getElementById('cmBtn');
const inchBtn = document.getElementById('inchBtn');
const cmBox = document.getElementById('cmBox');
const inchBox = document.getElementById('inchBox');
cmBtn.onclick = () => {
cmBtn.classList.add('active-unit');
inchBtn.classList.remove('active-unit');
cmBox.style.display = 'block';
inchBox.style.display = 'none';
};
inchBtn.onclick = () => {
inchBtn.classList.add('active-unit');
cmBtn.classList.remove('active-unit');
inchBox.style.display = 'block';
cmBox.style.display = 'none';
};
// 多国尺码换算映射
const sizeMap = {
S: { US: "4-6", CA: "4-6", UK: "8-10", EU: "34-36" },
M: { US: "8-10", CA: "8-10", UK: "12-14", EU: "38-40" },
L: { US: "12-14",CA: "12-14",UK: "16-18", EU: "42-44" },
XL: { US: "16-18",CA: "16-18",UK: "20-22", EU: "46-48" }
};
const allSelect = document.querySelectorAll('.region-select');
// 同步更新两张表格尺码列
function updateSize(area) {
document.querySelectorAll('td[data-sizekey]').forEach(cell => {
let key = cell.getAttribute('data-sizekey');
cell.textContent = sizeMap[key][area];
})
}
// 下拉选择联动
allSelect.forEach(sel => {
sel.addEventListener('change', e => {
let val = e.target.value;
allSelect.forEach(s => s.value = val);
updateSize(val);
})
})
</script>